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

回答1:

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.

回答2:

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

chart.reflow();

回答3:

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

回答4:

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

回答5:

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/

回答6:

If you do not provide width property to the chart, it should automatically get the width of the container. So just remove the width from the chart and give the container width: 100% and that should work.

If you want a specific width, just change the container width to a specific size. The chart should still be 100% of that size. JSFiddle

Example:

HTML

<div id="container">
    <div id="chart"></div>
</div>

JS

    var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'chart',
        margin: 0,
        height: 200,
        defaultSeriesType: 'areaspline'
    },

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

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

CSS

#container {
    width: 100%;
    height: 200px;
}

回答7:

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