highcharts redraw and reflow not working
Solution 1
How about using simple chart.setSize(w,h)
? See docs.
$("#container").highcharts().setSize(800, height);
Solution 2
Just remove the width of the chart from
$('#container').highcharts({
chart: {
type: 'line',
width: 300
},
so that it is like this
$('#container').highcharts({
chart: {
type: 'line'
},
and set the container width to 300 like this
#container {
width: 300px;
}
then just resize the container div as you are already doing. the chart will resize according to the width of the container div.
hope this helps.
user3634895
Updated on June 09, 2022Comments
-
user3634895 almost 2 years
I am trying to build a dynamic page that has any number between 1-4 graphs on it that can be added or removed as needed but I have run into a huge problem and I can't seem to get the graph to resize after resizing the containing div. for example if I add a graph on the page it will be width 800, then click a button to add another graph it should resize to be 400 a piece but I cannot make it happen. As a very simplistic model I have the following
$(function () { $('#container').highcharts({ chart: { type: 'line', width: 300 }, title: { text: 'Width is set to 300px' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); $('#resize').click(function() { $('#container').attr('style', 'width: 800px'); $("#container").highcharts().reflow(); console.log($('#container').width()); }); });
now when that is run it will log 800 to the dev tools window in chrome but the graph will not resize. I have tried both redraw() and reflow() as suggested in the documentation for highcharts. I even setup a really quick demo on jsfiddle here, http://jsfiddle.net/7cbsV/ can anyone please help me. It is kind of important. Thank you in advance for the help.