HighCharts: using redevelopment to automatically resize after resizing

Question

In our Angular app, we use highcarts-ng for our HighCharts .

Here is the Maximize and Minimize chart function that works:

function expandChartPanel() { vm.chartMaxed = !vm.chartMaxed; viewHeader = ScopeFactory.getScope('viewHeader'); highChart = ScopeFactory.getScope('highChart'); var chart = highChart.chartObject; var highChartContainer = document.getElementById("highchart-container"); var highChartContainerWidth = document.getElementById('highchart-container').clientWidth; var highChartContainerHeight = document.getElementById('highchart-container').clientHeight; var windowWidth = window.innerWidth; var windowHeight = window.innerHeight; if (vm.chartMaxed) { vs.savedWidth = highChartContainerWidth; vs.savedHeight = highChartContainerHeight; console.log('savedWidth = ', vs.savedWidth); console.log('savedHeight = ', vs.savedHeight); root.chartExpanded = true; viewHeader.vh.chartExpanded = true; highChart.highChartMax = true; highChartContainerHeight = document.getElementById('highchart-container').clientHeight; windowWidth = window.innerWidth; windowHeight = window.innerHeight; highChart.chartConfig.size.width = windowWidth; highChart.chartConfig.size.height = windowHeight - 220; chart.setSize(windowWidth, windowHeight - 220); } else { root.chartExpanded = false; viewHeader.vh.chartExpanded = false; highChart.highChartMax = false; highChart.chartConfig.size.width = vs.savedWidth; highChart.chartConfig.size.height = vs.savedHeight; chart.setSize(vs.savedWidth, vs.savedHeight); } highChart.restoreChartSize(); } 

Here is the reflow function:

 function restoreChartSize() { console.log('restoreChartSize'); if (!vs.chartObject.reflowNow) { vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() { this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); this.setSize(this.containerWidth, this.containerHeight, true); this.hasUserSize = null; } } vs.chartObject.reflowNow(); } 

This reflow function above works fine in this jsFiddle , but not in our application.

Full Gist file of our HighChartsDirective file .

After clicking the "Maximize" button, the chart will expand to the full size of the browser window, but after dragging to resize the browser window, I call the restoreChartSize function, which activates the payment.

However, the size of the chart does not go into auto-size 100% 100%, it returns to the previous size of the chart: (

Before Maximize:

After the Maximize function:

Now after resizing the browser window:

 window.onresize = function(event) { console.log('window resizing...'); highChart = ScopeFactory.getScope('highChart'); highChart.restoreChartSize(); console.log('highChart.chartConfig = ', highChart.chartConfig); }; 

^ back to smaller static sizes, not 100% auto-size

Answer 1

You can do this by adding a new method to the chart, which will manually activate the payment as follows:

 chart.reflowNow = function(){ this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); this.setSize(this.containerWidth, this.containerHeight, false); this.hasUserSize = null; } 

Then, when you want to get away from manually resizing with setSize (), just call chart.reflow()

Here is a working example: jsFiddle

Link taken from: github-issue

UPDATE for ng-highcharts users

To do this, when using the ng-highcharts library, you can simply pull out the chart object in the controller with the highcharts-ng dependency and add the reflowNow function, for example:

 var chart = this.chartConfig.getHighcharts(); chart.reflowreflowNow = function (){ ... } 

This is also the recommended way to pull out a chart for custom tasks by ng-highcharts author, as mentioned here , and this is fiddle .

Answer 2

In the end, I found an alternative solution, the only one that could work, and in fact it was quite simple and straight forward. In case anyone is looking for a fix for this, here are links to resources that were helpful and solved the problem for me.

You can simply add this to your chart configuration object at the same level as config.series or config.options. Link to comments link, but the actual solution that worked for me uses $ timeout with 0 seconds, here

* highcharts-ng to use highcharts-ng

http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=preview

 $scope.chartConfigObject = { // function to trigger reflow in bootstrap containers // see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211 func: function(chart) { $timeout(function() { chart.reflow(); //The below is an event that will trigger all instances of charts to reflow //$scope.$broadcast('highchartsng.reflow'); }, 0); } };