Im trying to make my rendered chart fill 100% of the parent div with no success. Is there any way I can remove the gap on the left and right sides?
http://jsfiddle.net/sKV9d/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
width: 300,
height: 200,
defaultSeriesType: 'areaspline'
},
series: [{
data: [33,4,15,6,7,8, 73,2, 33,4,25],
marker: {
enabled: false
}
}]
});
Wrap your charts in a container and this will give you the flexibility to adjust the chart size when your screen changes. Also provide a width to your wrapper and make it float to the left so that charts are placed side by side.
margin: number, Array. The margin between the outer edge of the chart and the plot area. The numbers in the array designate top, right, bottom and left respectively. Use the options marginTop , marginRight , marginBottom and marginLeft for shorthand setting of one option. By default there is no margin.
Since Highcharts 5.0 you can create responsive charts much the same way you work with responsive web pages. A top-level option, responsive, exists in the configuration. One of the most handy options is chart. className that can be used to control the style of all other elements in Highcharts styled mode.
If you remove the options width: 300, height: 200
like this:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
margin: 0,
defaultSeriesType: 'areaspline'
},
...
it will fill automatically the container.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With