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.

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

Answer 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.