Highcharts , Types of property 'series' are incompatible

user_13248765 0
Viewed 2194

I m creating a charts in angular using Highchart , but I m getting this error while compiling . The properties are compatible, but typescript compiler throws an error. I don't understand why and how to avoid this error. Any suggestion ? I m using angular 11

 error TS2322: Type '{ chart: { type: string; }; title: { text: string; }; xAxis: { categories: string[]; }; yAxis: { title: { text: string; }; }; series: ({ name: string; data: number[]; type: string; color?: undefined; } | { name: string; data: number[]; type: string; color: string; })[]; }' is not assignable to type 'Options'.
  Types of property 'series' are incompatible.
    Type '({ name: string; data: number[]; type: string; color?: undefined; } | { name: string; data: number[]; type: string; color: string; })[]' is not assignable to type 'SeriesOptionsType[]'.
      Type '{ name: string; data: number[]; type: string; color?: undefined; } | { name: string; data: number[]; type: string; color: string; }' is not assignable to type 'SeriesOptionsType'.
        Type '{ name: string; data: number[]; type: string; color?: undefined; }' is not assignable to type 'SeriesOptionsType'.       
          Type '{ name: string; data: number[]; type: string; color?: undefined; }' is not assignable to type 'SeriesXrangeOptions'.   
            Types of property 'data' are incompatible.
              Type 'number[]' is not assignable to type 'XrangePointOptionsObject[]'.
                Type 'number' has no properties in common with type 'XrangePointOptionsObject'.

3   [options]="chartOptions"
    ~~~~~~~~~~~~~~~~~~~~~~~~


import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

  title = 'myHighchart';
  Highcharts: typeof Highcharts = Highcharts;

  data = [{

          name: 'ItSolutionStuff.com',
          data: [500, 700, 555, 444, 777, 877, 944, 567, 666, 789, 456, 654],
          type: "spline",
          

       },{      
          name: 'Nicesnippets.com',
          data: [677, 455, 677, 877, 455, 778, 888, 567, 785, 488, 567, 654],
          type: "spline",
           color: '#3183F5'

       }];
 
       chartOptions = {   
    chart: {
      type: "spline"

    },
    title: {
       text: "Monthly Site Visitor"
    },
    xAxis:{
       categories:["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    yAxis: {          
       title:{
          text:"Visitors"
       } 
    },
    series: this.data
  };
 
<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style = "width: 100%; height: 400px; display: block;">

></highcharts-chart>

angular typescript highcharts
3 Answers

Your data is correct, please check how casting to any will work, chartOptions: any = ....

When you want to follow the rules you should not initiate the chart with series predefined like this: series: this.data.
You might create a variable for each element of series for example name, data, color etc., or even keep that in the array. However, the whole structure of the series should be defined in the chartOptions, otherwise, the chart will trow errors.

series: [
  {
    name: this.name1,
    type: "spline",
    data: this.data1
  },
  {
    type: "spline",
    data: this.data2,
    name: "Nicesnippets.com",
    color: "#3183F5"
  }
]

You also might always create your own TS interface or extend the existing one.

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-dpqftl

user_129926890 
series:this.data as SeriesOptionsType[]

it worked for me.

user_24442520

SeriesOptionsType is just a collection of all series options types, and it doesn't specify data. All series options types define data specifically for that series type. In your case (spline chart), you should be using SeriesSplineOptions instead.

user_26552600
Related