Angular Highcharts not displaying data from API

Question

Appreciate there are a lot of similar questions but I can't quite see where I've gone wrong as I have the same approach working with a different chart type in another control.

I have a child component that receives data from its parent and is meant to display a stacked column chart. It will display the chart occasionally but more often than not it will fail which leads me to think there is some kind of race condition.

column.component.html

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" [callbackFunction]="chartCallback" [(update)]="updateFlag" style="width: 100%; height: 400px; display: block;"></highcharts-chart>

column.component.ts

export class ColumnComponent implements OnInit {

chartRef: any;

Highcharts = Highcharts;
chartOptions: any;

@Input() liquidityChart: Map<string, Pair[]>[] = [];
@Input() chartLabels: string[] = [];
@Input() title: string = ''

updateFlag: boolean = false;

constructor() { }

  ngOnInit() {
    this.chartOptions = {
      chart: {
        type: 'column',
        backgroundColor: '#424242',
        plotBackgroundColor: '#424242',
        plotBorderWidth: null,
        plotShadow: false,
        zoomType: 'x'
      },
      title: {
        text: 'Liquidity',
        style: {
          color: '#FFFFFF'
        }
      },
      xAxis: {
        categories: this.chartLabels, //["Sep 23", "Oct 23", "Nov 23", "Dec 23", "Mar 24", "Jun 24", "Sep 24"],

        labels: {
          style: {
            color: '#FFFFFF'
          }
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: '% AUM'
        },
        stackLabels: {
          enabled: true
        },
        labels: {
          style: {
            color: '#FFFFFF'
          }
        }
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y }<br/>'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true
          }
        }
      },
      series: []
  // {
  //     "name": "Fund 1",
  //     "data": [
  //         0.0381,
  //         0.0,
  //         0.0,
  //         0.0,
  //         0.0,
  //         0.0,
  //         0.0
  //     ]
  // },

    }

    HC_exporting(Highcharts);

    setTimeout(() => {
      window.dispatchEvent(
        new Event('resize')
      );
    }, 300);
  }
  ngOnChanges(changes: SimpleChanges) {
    this.updateChart()
  }
  chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
    this.chartRef = chart;
    console.log('chartCallback has been called')
    this.updateChart();
  };


  updateChart(): void {
    console.log('updateChart has been called')
    if (this.chartRef != null) {
      console.log('updatingChart', this.chartRef)
      if (this.chartRef.series > 0) {
        console.log('setting data', this.chartRef.series)
        this.chartRef.series[0].setData(this.liquidityChart)
      }
      else {
        console.log('adding data', this.chartRef.series, this.liquidityChart)
        this.chartRef.addSeries(this.liquidityChart)
      }
    }


    this.updateFlag = false;
  }

  
}

In my other component which works identically to this it receives the data, I call the series[0].setData(data) function and it works but here I usually get a 'Cannot read properties of undefined (reading 'setData')' error even though I have a chart object.

Logging to the console tells me that the liquidityChart object has data at the time I'm trying to setData or addSeries.

Any clues would be appreciated!

Answer 1

Its not the "answer" but for completeness incase anyone has a similar problem, but it seems to have solved itself without any changes to the code itself (although I can't be sure if I upgraded a minor version of the library)