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

Question

We are upgrading highcharts & angular versions.

Angular: 12.1.5

highcharts: 9.0.1

highcharts-angular: 3.0.0

Earlier we used to have angular-highcharts as wrapper to highcharts js now migrating to official highcharts-angular wrapper.

We're facing issues while accessing chart series data.

        this.chart.series[0].data = [...data];

it's throwing these console errors.

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

We tried checking types to explicitely force ts compiler to check for data type: this

We tried juggling few compatible versions(highcharts, highcharts-angular) up and down.

We avoided going ahead using 'any' as it's ugly.

Answer 1

To fix that you need to create your own type that will extend the default Highcharts one with the new properties. Then all you need to do is to cast the selected option / to the extended type.

Demo: https://stackblitz.com/edit/highcharts-angular-property-xxx-doesnt-exist

Docs: https://github.com/highcharts/highcharts-angular#property-xxx-does-not-exist-on-type-yyy