CODEWITHSUNDEEP
typescriptvue.jshighcharts
Phymo
Phymo

Reputation: 152

highcharts with type scripts and vue, type incompatible error

when using highcharts with type scripts and vue, errors as below, seems type incompatible, how can I avoid these errors?:

"Argument of type '{ chart: { type: string; }; title: { text: string; align: string; verticalAlign: string; style: {...' is not assignable to parameter of type 'Options'. Types of property 'series' are incompatible. Type '{ dataLabels: { enabled: boolean; }; name: string; innerSize: string; data: number[]; states: { h...' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.

import Highcharts from 'highcharts';
import HighChartsMore from 'highcharts/highcharts-more.js';
updateHealthChart(){
    var options = {
      chart: {
            type: 'pie'
        },
        title: {
            text: '75%',
            align: 'center',
            verticalAlign: 'middle',
            style:{"color": '#00c73c'},
            y: -5, 
        },

        colors: [
            '#00c73c',
            '#f2f2f2'
        ],
        series: [{
            dataLabels: {
                enabled: false,
            },
            name: 'Jane',
            innerSize: '90%',
            // sliced: true,
            data: [9,3],

            states:{
                hover:{
                    enabled: false,
                }
            }
        }]

    };

  Highcharts.chart('health', options);
  }

Upvotes: 0

Views: 1573

Answers (1)

Phymo
Phymo

Reputation: 152

problem solved as below:

 import Highcharts, {Options} from 'highcharts';
    Highcharts.chart('health', options as Options);

Upvotes: 2

Related Questions