user6628729 user6628729 - 4 months ago 14
CSS Question

Chart position in highchart

I create 2 highcharts i.e.

<div>
<p id="container">
</p>
<p id="cont">
</p>

</div>


i set and width and height like this

$('#cont').highcharts({
chart: {
width: 500,
height: 300,

type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},


cont chart is under container chart but i want chart both in same line check this

http://i.stack.imgur.com/bUpHZ.png

and also how i add border

Answer

The angular gauge demo on the Highcharts website shows a great example of how to do this.

In their code, they arrange and style their <div> elements like this:

<div style="width: 600px; height: 400px; margin: 0 auto">
    <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
    <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

Here's how it looks:

enter image description here

Now, as far as adding a border to your charts, here is how you would do that:

    chart: {
        type: 'solidgauge',
        borderColor: 'red',
        borderWidth: 1
    },

That would change these charts to:

enter image description here

Look in the API documentation for more details on how to change other appearance options for the chart, including border radius and background color: http://api.highcharts.com/highcharts#chart

I hope this is helpful.