Series chart not updating in angular

[rojer]

Scenario: I have a filter for a chart where the user can select multiple or a single project. When the user filters the data, the chart should update accordingly. When I log the this.chartOptions.series in the console, the data is updated but the chart is not updating.

Expected outcome: The chart should update with only the selected projects.

My component:

Code: Select all

import { formatDate } from '@angular/common';
import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
import { ChartService } from 'src/app/services/chart.service';
import { ChartFiltersInput } from 'src/app/types/chart';

HC_exporting(Highcharts);
Highcharts.setOptions({
  lang: {
    thousandsSep: ','
  }
});

@Component({
  selector: 'app-project-purchase-column',
  templateUrl: './project-purchase-column.component.html',
  styleUrls: ['./project-purchase-column.component.scss']
})
export class ProjectPurchaseColumnComponent implements AfterViewInit {
  Highcharts: typeof Highcharts = Highcharts;
  chart: Highcharts.Chart | undefined;
  updateFlag = false;
  chartCallback: Highcharts.ChartCallbackFunction;
  chartOptions: Highcharts.Options = {
    accessibility: {
      enabled: false
    },
    chart: {
      type: 'column',
      style: {
        fontFamily: 'inherit'
      }
    },
    title: {
      text: 'Purchases by Project in a Period',
      y: 18
    },
    xAxis: {
      categories: [],
      crosshair: true
    },
    yAxis: {
      title: {
        useHTML: true,
        text: 'Amounts in hundreds'
      }
    },
    plotOptions: {
      column: {
        pointPadding: 0.2,
        borderWidth: 0
      }
    },
    series: Array.from({ length: 6 }, (_, k) => ({
      name: '',
      type: 'column',
      data: []
    })) as Highcharts.SeriesOptionsType[]
  };

  constructor(private _chartService: ChartService, private _cdr: ChangeDetectorRef) {
    const self = this;
    this.chartCallback = chart => {
      // saving chart reference
      self.chart = chart;
    };
  }

  ngAfterViewInit(): void {
    this.updateChart();
  }

  updateChart(filters?: ChartFiltersInput) {
    const chart = this.chart;
    let end = filters?.end ?? new Date();
    let start = filters?.start ?? new Date().setMonth(new Date().getMonth() - 12);

    const params = {
      "project_id[]": filters?.project_id ?? [],
      start: formatDate(start, 'YYYY-MM-dd', 'en-US'),
      end: formatDate(end, 'YYYY-MM-dd', 'en-US')
    };

    if (chart) {
      chart.showLoading();
      this._chartService.getColumnChartData('PURCHASE_BY_PROJECT', params).subscribe(result => {
        if (result && result.data.length) {
          this.updateFlag = true;
          const data = result.data.map(d => ({
            ...d,
            type: 'column'
          })) as Highcharts.SeriesOptionsType[];

          this.chartOptions.xAxis = {
            categories: result.x,
            crosshair: true
          };
          this.chartOptions.series = data;

          console.log(this.chartOptions.series);

          chart.update(this.chartOptions, true);
          chart.hideLoading();
          this.updateFlag = false;
          this._cdr.detectChanges();
        }
      });
    }
  }
}

The data from the api:

Code: Select all

[
    {
        "name": "A",
        "data": [
            0,
            0,
            0,
            0,
            0,
            294998.28,
            511051.22,
            206935.2,
            443584.6,
            244004.96,
            838440.32,
            430719.82,
            303089.88
        ],
        "type": "column"
    },
    {
        "name": "B",
        "data": [
            0,
            0,
            0,
            0,
            0,
            221240,
            175234.9,
            373981.18,
            293857.75,
            5202.94,
            152317.53,
            44295.88,
            62250
        ],
        "type": "column"
    },
    {
        "name": "C",
        "data": [
            0,
            0,
            0,
            0,
            0,
            32190,
            183497,
            93295,
            850263.37,
            174252.77,
            292558,
            283369.36,
            157581.8
        ],
        "type": "column"
    },
    {
        "name": "D",
        "data": [
            0,
            0,
            0,
            0,
            0,
            0,
            13500,
            0,
            0,
            0,
            9398,
            0,
            0
        ],
        "type": "column"
    },
    {
        "name": "E",
        "data": [
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0
        ],
        "type": "column"
    },
    {
        "name": "F",
        "data": [
            0,
            0,
            0,
            0,
            0,
            0,
            27020,
            0,
            427180,
            0,
            6250,
            0,
            0
        ],
        "type": "column"
    }
]

When user filters the data the api responds:

Code: Select all

[
    {
        "name": "A",
        "data": [
            0,
            0,
            0,
            0,
            0,
            294998.28,
            511051.22,
            206935.2,
            443584.6,
            244004.96,
            838440.32,
            430719.82,
            303089.88
        ],
        "type": "column"
    },]

[sebastian.h]

Thanks for contacting and asking your question.

Thanks for your code, but I can't recreate this, could you prepare example in online code editor?
https://github.com/highcharts/highchart ... e-examples

An our angular Highcharts wrapper you can find demos that you can use as template, including update and pass data from services, that could be help in your case.

I'm waiting for news from you.
Best regards

[rojer]

Hi, thank you for the reply.

I've created a stack blitz for the issue that I'm describing.
https://stackblitz.com/edit/highcharts- ... mponent.ts

[rojer]

I solved this issue by using the following solution:
1. I removed all the series data from the chart object
2. Added the new series data

Code: Select all

	// Update series
	while (chart.series.length) {
		chart.series[0].remove();
	}
      data.map(d => chart.addSeries(d));
 

updating the options only will not work

[sebastian.h]

In case of updating chart series the best approach is to link to the chartRef, note that series are structured like an array of objects, to update all of them you need to refer to their key.

Code: Select all

   updateChart(): void {
    this.chartRef.series[0].update(
      {
        name: 'D',
        data: [0, 0, 0, 0, 0, 0, 13500, 0, 0, 0, 9398, 0, 0],
        type: 'column',
      },
    );

    this.chartRef.series[1].update(
      {
        name: 'F',
        data: [0, 0, 0, 0, 0, 0, 13500, 0, 0, 0, 9398, 0, 0].reverse(),
        type: 'area',
      },
    );

    this.chartRef.title.update({
      text: 'Title was updated',
    });

    this.updateFlag = false;
  }

Demo:
https://stackblitz.com/edit/highcharts- ... onent.html

Let me know if you have more questions about this.
Best regards