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

Question

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.

Solution 1

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

Solution 2

when you are using multiple series in your charts you need to mention the type of the series. Simply changing your code to this works sometimes:

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

Do Give it a try once. I hope this helps to solve your problem.

Solution 3

Try

new Chart({YOUR_OPTIONS} as any);

It will fix the error.

Solution 4

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

View more solutions