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

还收到相同的“SeriesXrangeOptions”错误，但xrange不是有效的类型选项。指定系列图表类型适用于那些收到无效类型错误的人。

工作示例：

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

当您在图表中使用多个系列时，您需要提及系列的类型。有时只需将代码更改为这样即可：

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

请尝试一次。我希望这有助于解决您的问题。

Answer 3

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

但类型 'SeriesXrangeOptions'.ts(2322) highcharts.d.ts(339172, 5) 中需要：'type' 在此声明。

Series该错误与代码中对象中缺少属性有关。在 TypeScript 中，type必须始终设置该选项。

所以，正确的代码将是这样的：

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

假设您想将xrange两个系列设置为系列类型。（您可以跳过额外的空行 - 添加只是为了更好地显示更改后的代码）

Highcharts github 上报告并解决了相同的问题，以供参考：https ://github.com/highcharts/highcharts/issues/9867