Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HighCharts full width issue

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
        }
    }]
});
like image 335
user2341636 Avatar asked May 02 '13 04:05

user2341636


People also ask

How do I change the width of a Highchart?

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.

How do I set margins in Highcharts?

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.

Is Highcharts responsive?

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.


1 Answers

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.

like image 127
MISJHA Avatar answered Sep 21 '22 03:09

MISJHA