HighCharts Full Width

Question

I am trying to make my processed chart fill 100% of the parent div without success. Is there a way to 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

If you remove the options width: 300, height: 200 as follows:

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

it will automatically fill the container.

Answer 2

The problem is with the jquery user interface. after rendering your chart, call this code to pay for the chart. This fixed my problem.

 chart.reflow(); 

Answer 3

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

Answer 4

Try the following:

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

Answer 5

I decided it

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

UPD:

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

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

2a. Another way is if it is impossible to determine the size of the container during the "development", you can reformat the chart after loading the chart (that is, call chart.reflow ();):

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

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

Answer 6

If you do not provide the width property on 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 this should work.

If you need a specific width, just change the width of the container to a specific size. The chart should still be 100% of this 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; } 

Answer 7

use the updateChart function and call chart.reflow () inside this function

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

call updatechart every 30 seconds using any update mechanism

Answer 8

just add CSS

 .highcharts-container{ width: 100% !important; } .highcharts-root{ width: 100% !important; } 

Answer 9

A problem with Highcharts has already been reported here . To handle this, we can do something like the one mentioned above. I also ran into the same problem, so I solved it with

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

after rendering my graph like:

 this.chartData={ ... //some required data object to render chart } Highcharts.stockChart('divContainerID', this.chartData, function (chart) {}); window.dispatchEvent(new Event('resize'));