Typescript and Angular2-highcharts: Property 'series' does not exist on type 'Object'

Question

When i try to implement the following plunkr in Angular, i get the following error message.

Property 'series' does not exist on type 'Object'.

http://plnkr.co/edit/OQSFSKisIIWAH0megy4d?p=preview

i've installed "angular2-highcharts": "^0.5.5", and the typing "@types/highcharts": "^5.0.5",

Any help would be appreciated.

Answer 1

The the compiler does not know if the property series is present in this.options when you type it as Object.

To overcome this you can either remove the typing for the property (the lazy way out):

class AppComponent {

    options: any;
}

Or you can let the compiler infer the type from the object by assigning it directly so this.options will be typed properly:

class AppComponent {

    options = {
        chart: {
            zoomType: 'xy'
        },
        series: ...
        // ...
    };
}

Or define the type of options in an interface:

interface Options {
    series: any[], // Should be typed to the shape of a series instead of `any`
    // and type other props like "chart", "title"
}
class AppComponent {

    options: Options;

    constructor() {
        this.options = {
            chart: {
                zoomType: 'xy'
            },
            series: ...
            // ...
        };
    }
}

Answer 2

In my case to make line chart working, I was using [runOutsideAngular]="true".

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions.trends" [runOutsideAngular]="true"
            style="width: 100%; height: 300px; display: block;"
            [ngStyle]="{'opacity': chartOptions.trends.series[0].data.length === 0 ? 0 : 1}">
          </highcharts-chart>

this works fine in dev but while production it was throwing the same error

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

casting chartOptions.trends to type any solved the issue.

Answer 3

In case someone finds it useful

Declare chart in your component like

export class DemoComponent {
  chart: Chart;

And add type option in series like

this.chart = new Chart({
  ...,
  series: [
    {
      name: 'Line 1',
      data: [1, 2, 3],
      type: 'line'
    }
  ]
});