Utilizing HighCharts' Reflow Feature for Dynamic Chart Resizing

Question

Utilizing HighCharts' Reflow Feature for Dynamic Chart Resizing

Our Angular application utilizes highcarts-ng for implementing HighCharts.

Check out the Chart Maximize and Minimize function that is currently operational:

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

Also included 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();
}

The above reflow function functions properly in this jsFiddle example, but not within our app.

You can find the complete Gist file of our HighChartsDirective here.

After clicking on Maximize, the chart expands to the full size of the browser window. However, upon resizing the browser window, calling the restoreChartSize function does not resize the chart to auto-size 100% as intended.

Before Maximizing: https://i.stack.imgur.com/d4Guh.png

After Maximization:

https://i.stack.imgur.com/YqegF.png

Upon resizing the browser window:

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

https://i.stack.imgur.com/d4Guh.png

^ reverts back to smaller static sizes instead of auto-size 100%

javascript angularjs charts highcharts highcharts-ng

Answer 1

Answer №1

To manually trigger a reflow in the chart, you can add a new method like this:

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

Instead of using manual resizing with setSize(), simply call chart.reflow() when needed.

Here's an example demonstrating this: jsFiddle

Original reference source: github-issue

Update for ng-highcharts users

If you are using the ng-highcharts library, to achieve this functionality, extract the chart object in the controller with the highcharts-ng dependency and include the reflowNow function, as shown below:

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

This method is recommended by the author of ng-highcharts for custom operations. More details can be found here along with this fiddle.

Answer 2

To manually trigger a reflow in the chart, you can add a new method like this:

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

Instead of using manual resizing with setSize(), simply call chart.reflow() when needed.

Here's an example demonstrating this: jsFiddle

Original reference source: github-issue

Update for ng-highcharts users

If you are using the ng-highcharts library, to achieve this functionality, extract the chart object in the controller with the highcharts-ng dependency and include the reflowNow function, as shown below:

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

This method is recommended by the author of ng-highcharts for custom operations. More details can be found here along with this fiddle.

Answer 3

Answer №2

I was able to discover a different solution that ended up being the only one that worked for me. Surprisingly, it was quite simple and easy to implement. For those who may be facing a similar issue, I have provided links to the resources that helped me resolve the problem.

To fix this issue, you just need to include the following code snippet in your chart configuration object, at the same level as the config.series or config.options. Although the comment provides some information, the actual solution that worked for me involved using $timeout with a delay of 0 seconds.

*Specifically for highcharts-ng usage

http://example.com/unique-link-here

$scope.chartConfigObject = {
    
    // A function to trigger reflow in bootstrap containers
    // Refer to: http://examplelink.com and https://github.com/example/repo
    func: function(chart) {
        $timeout(function() {
            chart.reflow();
            // The following event will initiate all chart instances to reflow
            //$scope.$broadcast('highchartsng.reflow');
        }, 0);
    }
};

Answer 4

I was able to discover a different solution that ended up being the only one that worked for me. Surprisingly, it was quite simple and easy to implement. For those who may be facing a similar issue, I have provided links to the resources that helped me resolve the problem.

To fix this issue, you just need to include the following code snippet in your chart configuration object, at the same level as the config.series or config.options. Although the comment provides some information, the actual solution that worked for me involved using $timeout with a delay of 0 seconds.

*Specifically for highcharts-ng usage

http://example.com/unique-link-here

$scope.chartConfigObject = {
    
    // A function to trigger reflow in bootstrap containers
    // Refer to: http://examplelink.com and https://github.com/example/repo
    func: function(chart) {
        $timeout(function() {
            chart.reflow();
            // The following event will initiate all chart instances to reflow
            //$scope.$broadcast('highchartsng.reflow');
        }, 0);
    }
};

Utilizing HighCharts' Reflow Feature for Dynamic Chart Resizing

Answer №1

Answer №2

Similar questions

Manipulating a 2D array in Javascript and Jquery: Implementing push functionality

Unable to load the JSON texture file

What is the process of accessing JSON data from a server using AngularJS within the Eclipse environment?

Once the stripe token is generated, proceed to submit the form

How to surround values and keys with double quotes using regular expressions in JavaScript

The specific module 'franc' does not have the export named 'default' as requested

Troubleshooting issues with AngularJS routing

Access the outcome by utilizing a for loop

Encountered an error while attempting to execute the command npx create react app: spawn UNKNOWN error occurred

Compare the precise value of $(window).height() to a specific scroll value

Is it possible to alter the value of a global variable within a function and switch its value based on a local variable?

Refreshing the Dropdown Menu with Jquery

Verify in Jquery whether a table row contains no elements with a specified class before removing any duplicates

Guide to installing a dynamic favicon on a Next.js application for a specific route

Check if a Discord.js bot responds based on whether a user holds a designated role

Tips for adding content to a textarea with JavaScript without disrupting the editing history

Load a page and sprinkle some contents with a slide effect

Controller unable to properly increment values

Is there a way for me to retrieve SCSS color variables within the javascript of a Vue template?

Unable to access path for children through buttons in parent path