Highcharts over extends parent on resize (using flexbox)

1
votes

This question was initially a flexbox issue but has been altered to a highcharts resizing one.

The problem: I got the chart to resize perfectly in relation to it's parent (I was setting 100% height/width of it's parent) on window resize. The issue is that this only happens on a window resize event so when the page is initially loaded, the chart is not the size I want it (usually smaller)

Code:

HTML:

<div id="datalogger">
    <div id="DataLoggerChartContainer" ng-show="dataAvailable"></div>
</div>

CSS/LESS: (I was using flex but the styling does not matter)

#datalogger {

  display: flex;
  flex: auto;
  justify-content: center;
  align-items: center;
  width: 100%;

  #DataLoggerChartContainer {
    display: flex;
    flex: auto;
    width: 100%;
  }
}

JS: (to resize chart)

function reflowChart() {
    var parent = angular.element(element[0]);
    chart.setSize(parent.width(), parent.height());
}

@brightmatrix helped my realise that highcharts setSize() method will only resize the chart ONCE and is therefore not an ideal responsive solution. The reflow() and redraw(), as suggested, were not what I was looking for either. These methods aren't meant for responsiveness but mainly for if data is dynamically added to the chart and needs to be reloaded. reflow() is advertised on Highcharts API to dynamically resize to it's parent if it's size is altered. However, I think this only works if the window is not resized. So, the chart still has to be on the same sized window and the parent just has to resize within it's own container (on button click event for example (as in Highcharts API))

(Solution is below)

2
csshighchartsdata-visualization

2 Answers

2
votes

The problem is that as soon as you set fixed values for chart.setSize(), the responsive nature your chart is removed. I would suggest either adding percentage values, using the chart.redraw() function, or tying the chart.reflow() function to a resize event.

Here are the links to both functions in the API documentation so you can see which is best suited for your application:

I hope this helps!

2
votes

The solution:

After digging through previous code in other areas of this application, I decided to attempt to redraw (manually - not using the redraw() method) the chart on a window resize event. For example:

$(window).on("resize", function() {
    chart.destroy();

    initChart();
    reflowChart();
});

My initChart() function looks like this:

function initChart() {
    chart = new Highcharts.Chart(options);
}

My reflowChart() function is still the same as is mentioned above, however, the manual resizing does not matter as it resizes to the CURRENT height/width of the parent of the CURRENT window size. Because it is destroyed and recreated on each resize of the the window, this is an ideal solution.

N.B: It is not required but is recommended to call the destroy() method as it keeps the DOM nice and tidy. Also, I call the initChart() and reflowChart() when the page first loads as well

I hope this helps anyone that may come across this problem in the future!