n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Angular Highcharts reflow()

I'm having an issue getting a chart to resize when the div it's located in resizes, the window does not resize. The container div resizes on a button click. My issue is that I'm using the Angular Highcharts wrapper and can't figure out how to call the chart.reflow() function. Below is a snippet of some code in the component. It's a pretty long component so not going to include everything and also would take a while to reproduce but if I need to I can do that.

Code: Select all

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AppService } from '../../../services/app.service';
import * as Highcharts from 'highcharts';
import HighchartsExporting from "highcharts/modules/exporting";
import HighchartsExportData from "highcharts/modules/export-data";
import SeriesLabel from "highcharts/modules/series-label";
import { ToastrService } from 'ngx-toastr';
import { ChartUtil } from '../../../helpers/chart.util'
import { ChartScopeConfig } from 'src/app/models/app.model';
import { BreadcrumbData } from 'src/app/models/app.model';

HighchartsExporting(Highcharts);
HighchartsExportData(Highcharts);
SeriesLabel(Highcharts);

@Component({
  selector: 'prodcount',
  templateUrl: './prodcount.component.html',
  providers: [ChartUtil]
})

export class ProdCountComponent implements OnInit {
    highcharts: typeof Highcharts = Highcharts;
    dataAvailable = 0;
    
    productionCountChartOptions: Highcharts.Options = {
        chart: {
        zoomType: 'xy',
        reflow: true
        },
        accessibility:{
            enabled: true,
            highContrastTheme: true,
            keyboardNavigation:{
                enabled: true,
                seriesNavigation: {
                    mode: "normal",
                    pointNavigationEnabledThreshold: false,
                    skipNullPoints: true,
                },
            },
         },
        title: {
    
After an API call the data is loaded into the chart

Code: Select all

this.productionCountChartOptions.series = [{
        name: 'Units',
        type: 'column',
        yAxis: 1,
        data: this.chartData.units,
        tooltip: {
            valueSuffix: ' Units'
        }}, {
        name: 'Rolling Avg Built',
        type: 'spline',
        label: {
          enabled: true
        },
        yAxis: 1,
        data: this.chartData.avgBuilt,
        marker: {
            enabled: true
I'm calling a function when the button gets clicked and trying to somehow call chart.reflow() or a variation of that...this.productionCountChartOptions.chart.reflow(), this productionCountChartOptions.chart.events.reflow(), this.highcharts.chart.reflow(), etc.

With what I've shown here are you able to help me figure out how to call .reflow() or find a way to reflow. I know it's possible by finding the size of the div container the chart is in but I'm trying to keep it clean and not reference any html id's or elements.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Angular Highcharts reflow()

Hi there,

The chart resize to the parent div is a topic that has been discussed many times across our support channels, for example, I have attached a the link to the Angular reflow solution. Take a look at it and let us know if that has been helpful for you. If not, then we will ask you to kindly recreate your issue in an online editor, point out where and how you call the reflow method and then we can try to help.

Otherwise, if the reflow method won't work for your case, then I'd suggest using the setSize method that you have mentioned in your post since it's also a recommended solution.

Stack Overflow: https://stackoverflow.com/questions/317 ... nging-size

Best regards!
Kamil Musiałowski
Highcharts Developer
n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Re: Angular Highcharts reflow()

I've pretty much read through every reflow and resizing post on the internet I think over the past few days. My issue is with calling chart.reflow(). The .reflow() is not recognized with the angular wrapper or I'm just not referencing it correctly. With the code I provided above do you have any advice on how to call the .reflow(). Do I need to call the the.productionCountChartOptions or use this.highcharts somehow?
n8dogg592432
Posts: 17
Joined: Fri Aug 27, 2021 3:45 pm

Re: Angular Highcharts reflow()

Just to add to the previous post, all the examples show running chart.reflow() because they're setting a variable equal to Highcharts.Chart, example - var chart = new Highchart.Chart. With the Angular Highcharts wrapper we just set the chart options like this example - productionCountChartOptions: Highcharts.Options = {. So there's no chart to reference in chart.reflow() and trying this.productionCountChartOptions.chart.reflow() doesn't work because the reflow() function isn't recognized since with the Angular Highcharts wrapper we set reflow = true/false. Just trying to expand on my issue.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Angular Highcharts reflow()

Hi n8dogg592432,

I have prepared an example in which I show how to use the highcharts reflow() method.
https://api.highcharts.com/class-refere ... art#reflow
We have two Angular methods hooked up to separate buttons, if you click on update the window size changes but the chart is not reflow, you have to adjust it. Under the next button is the reflow method which reflows chart to container.

Demo: https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know how it works in your environment.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”