How to fix “Property 'type' is missing in type but required in type 'SeriesXrangeOptions'” in angular highcharts module

问题

I am trying to display a price chart view of selected cryptocurrency in cryptocurrencies list view but I am getting type mismatch error.

I have used angular-highcharts module in my application and imported Chart library from that module .

import { Chart } from 'angular-highcharts';

series: [{
  name: 'Price',
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{
  name: "Volume_24h",
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

I am getting the below error in all of the above lines :

Type '{ name: string; data: { id: any; name: any; y: any; }[]; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | SeriesAreasplinerangeOptions | ... 82 more ... | SeriesZigzagOptions'.

Property 'type' is missing in type '{ name: string; data: { id: any; name: any; y: any; }[]; }' but required in type 'SeriesXrangeOptions'.ts(2322) highcharts.d.ts(339172, 5): 'type' is declared here.

I should get a chart view of the selected cryptocurrency showing the volume over 24hrs and price.

回答1:

Property 'type' is missing in type '{ name: string; data: { id: any; name: any; y: any; }[]; }'

but required in type 'SeriesXrangeOptions'.ts(2322) highcharts.d.ts(339172, 5): 'type' is declared here.

The error is about missing property in the Series object in your code. In TypeScript the type option must always be set.

So, the correct code will be like:

series: [{

  type: 'xrange`,

  name: 'Price',
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{

  type: 'xrange`,

  name: "Volume_24h",
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

assuming that you want to set xrange as the series type for both series. (And you could skip the extra empty lines - added just to better show the changed code)

The same issue reported and resolved on the Highcharts github, for reference: https://github.com/highcharts/highcharts/issues/9867

回答2:

Try

new Chart({YOUR_OPTIONS} as any);

It will fix the error.

回答3:

Also received the same "SeriesXrangeOptions" error, however xrange was not a valid type option. Specifying the series chart type worked for those who receive an invalid type error.

Working example:

chart = new Chart({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Linechart'
    },
    credits: {
        enabled: false
    },
    series: [{
        type: 'line',
        name: 'Jane',
        data: [1, 0, 4, 6, 11]
    }, {
        type: 'line',
        name: 'John',
        data: [5, 7, 3, 2, 9]
    }]
});

来源：https://stackoverflow.com/questions/54670687/how-to-fix-property-type-is-missing-in-type-but-required-in-type-seriesxrang

标签

angular

typescript

Highcharts