Angular: HighChart TreeMap is not updating with the new data-CodePudding

I am trying to update my highcharts treemap with new data but it dosen't seem to reflect when I click on update. Only the title getting changed.

Also the option which was suggested on multiple page's dont seems to work:

this.chartOptions.series[0].data = this.datatable; // ERROR

Here is the whole code in stackblitz and update method:

handleUpdate() {
this.chartOptions.title = {
  text: 'updated'
};
this.datatable = [{
  name: 'A',
  value: 6,
  colorValue: 1
}, {
  name: 'B',
  value: 6,
  colorValue: 2
}];
this.chartOptions.data = this.datatable;
this.updateFlag = true;
}

Any suggestion is much appreciated.

CodePudding user response：

New data must be entered into series in the chartOption object. Based on your code, I modified the handleUpdate code.

handleUpdate() {
  this.chartOptions.title = {
    text: 'updated',
  };
  this.datatable = [
    {
      name: 'A',
      value: 4,
      colorValue: 1,
    },
    {
      name: 'B',
      value: 6,
      colorValue: 2,
    },
  ];

  // modified code 1
  this.chartOptions.series[0] = {
    type: 'treemap',
    layoutAlgorithm: 'squarified',
    alternateStartingDirection: true,
    data: this.datatable,
  };
  
  // modified code 2
  this.chartOptions.series[0]['data'] = this.datatable;

  this.updateFlag = true;
}

Use modified code 1 or 2.

If you write the code as below, you will face the following error.

this.chartOptions.series[0].data = this.datatable;

Property 'data' does not exist on type 'SeriesOptionsType'. Property 'data' does not exist on type 'SeriesAbandsOptions'.

This is because 'data' object is defined as optional.

export interface SeriesTreemapOptions extends PlotTreemapOptions, SeriesOptions {
    data?: Array<(number|null|PointOptionsObject)>;
    dataParser?: undefined;
    dataURL?: undefined;
    stack?: undefined;
    type: "treemap";
}

CodePudding user response：

You are missed chart reference, there is no callback that sets a reference to the chart. If you want updated chart refer to the chartRef and it will be working.

  chartCallback: Highcharts.ChartCallbackFunction = chart => {
    this.chartRef = chart;
  };

Live demo: https://stackblitz.com/edit/highcharts-angular-basic-line-nteedw?file=src/app/app.component.ts

Highcharts wrapper for Angular: https://github.com/highcharts/highcharts-angular#installing