CODEWITHSUNDEEP
typescriptangular2-highcharts
Andreas Hald
Andreas Hald

Reputation: 215

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

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.

Upvotes: 8

Views: 10497

Answers (3)

Code Guru
Code Guru

Reputation: 15598

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.

Upvotes: 0

Akshay Sharma
Akshay Sharma

Reputation: 1

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'
    }
  ]
});

Upvotes: 0

Saravana
Saravana

Reputation: 40692

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: ...
            // ...
        };
    }
}

Upvotes: 5

Related Questions