HighCharts full width issue

Question

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
        }
    }]
});

Answer 1

I solved it by

window.dispatchEvent(new Event('resize'));

UPD:

1. remove width and height attributes.
2. add into .css the following code in order to adjust chart block to 100% of #container:

chart { width: 100%; height: 100%; }

2a. another way is - in case if not possible to define container size during "design" time you can reflow chart after chart load (i.e. call chart.reflow(); ):

chart: {

    events: {
        load: function(event) {
        **event.target.reflow();**
      }
    }
},

See example http://jsfiddle.net/yfjLce3o/

Answer 2

use updateChart function and call chart.reflow() inside that function

scope.updatechart = function(){
     scope.chart.reflow();
}

call updatechart method every 30 seconds using any refresh mechanism

Answer 3

The issue is because of jquery UI. after rendering your chart call this code to reflow the chart. This fixed my problem

chart.reflow();

Answer 4

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.

Answer 5

Set minPadding and maxPadding to 0, see: http://jsfiddle.net/sKV9d/3/

Answer 6

Try this :

var height= $("#container").height();
var width= $("#container").width();

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'chart',
        margin: 0,
        width: width,
        height: height,
        defaultSeriesType: 'areaspline'
    },    

    series: [{
        data: [33,4,15,6,7,8, 73,2, 33,4,25],    

        marker: {
            enabled: false
        }
    }]
});