javascripthighchartsgridstack

Highchart won't resize with Gridstack

I have recreated the issue within this CodePen:

https://codepen.io/GeorgeBT97/pen/BxKdEW

As you can see, if you resize the Gridstack tile, the Highchart does not resize with it despite being set to 100% of the height and width of its parent div.

I have seen this thread:

https://github.com/gridstack/gridstack.js/issues/792

Which says using this approach should solve the issue:

hChart.setSize(container.width, container.height, false);

However, I don't know how or where to implement this to fix the issue. If anybody could explain it would be greatly appreciated. On a side note, despite the fact that Highchart container by default is set to 100% height and width of its parent div, you can clearly see in the CodePen that it is not the full height of the div - Can anyone explain why this is?

Many thanks, G

Solution

  • The last comment in the github issue that you referred in your question reveals the solution. Use Chart.reflow function to adjust the chart to its container. The answer why it has to be done manually comes from the API:

    By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.

    Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

    JS code that does the job:

    $('.grid-stack').on('gsresizestop', function(event, elem) {
    chart.reflow();
});

    Live demo: https://codepen.io/anon/pen/Vxjaze

    Also you incorrectly reffered the container in your CSS . It should be done by id (not by class).