Facing issues with Highcarts.Chart

Published

I am new to highcharts and got stuck with one issue. I am not able to understand what am I doing wrong. I am using Highcharts 7.2.2 version to display charts on my application. I am using the below code. The code runs and compile successfully on my local machine. However, when I try to deploy it using CI CD process it keeps giving me the error. Below is the code I am using which is running perfectly on my local machine.

displayGraph(results: any, key: string) {
    var self = this;
    var faultCountData: number[][] = [];
    var faultDurationData: number[][] = [];
    for (var i = 0; i < results[key].length; i++) {
        var timeArr = results[key][i].duration.split(':');
        var ms = Number(timeArr[0]) * 160 *2 60 * 21000 + Number(timeArr[1]) * 160 * 11000;
        faultCountData.push([results[key][i].latestOccuranceTime, results[key][i].faultCount]);
        faultDurationData.push([results[key][i].latestOccuranceTime, ms]);
    }
    Highcharts.chart({
        chart: {
            renderTo:'dailyFault'
        },
        credits: { enabled: false },
        title: { text: '' },
        xAxis: {
            type: 'datetime',
            labels: {
                format: '{value:%e/%m/%Y}'
            }
        },
        yAxis: [{ 
            labels: {
                format: '{value}',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            title: {
                text: this.translation.translate("FAULT_COUNT", undefined, this.locale.getCurrentLanguage()),
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: this.translation.translate("FAULT_DURATION_HRS", undefined, this.locale.getCurrentLanguage()),
                style: {
                    color: '#ffb0ad'
                }
            },
            type: 'datetime',
            labels: {
                style: {
                    color: '#ffb0ad'
                },
                formatter: function () {
                    var time = this.value;
                    var hours1 = parseInt((time / 3600000).toString());
                    var mins1 = parseInt((parseInt((time % 3600000).toString()) / 60000).toString());
                    return (hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1);
                }
            },
            opposite: true
        }],
        tooltip: {
            enabled: true,
            pointFormatter: function () {
                var time = this.y;
                var hours1 = parseInt((time / 3600000).toString());
                var mins1 = parseInt((parseInt((time % 3600000).toString()) / 60000).toString());
                if (this.series.name == "Fault Count")
                    return `<span style="color:${this.color}">u25CF</span> ${this.series.name}: <b>${this.y}</b><br/>`;
                else
                    return `<span style="color:${this.color}">u25CF</span> ${this.series.name}: <b>${(hours1 < 10 ? '0' + hours1 : hours1) + ':' + (mins1 < 10 ? '0' + mins1 : mins1)}(${self.translation.translate("RUNTIME.MAINTENANCE_ADVISOR.DAILY_FAULT.HRS", undefined, self.locale.getCurrentLanguage())})</b><br/>`;
            },
            shared: true
        },
        series: [
            {
                name: this.translation.translate("FAULT_DURATION", undefined, this.locale.getCurrentLanguage()),
                data: [faultDurationData],
                type: 'column',
                yAxis: 1,
                color: '#ffb0ad'
            },
            {
                name: this.translation.translate("FAULT_COUNT", undefined, this.locale.getCurrentLanguage()),
                type: 'spline',
                data: [faultCountData]                    
            }
        ]
    });

}

The above code run perfectly in my local. however while deploying I am getting the below error:

error TS2345: Argument of type '{ chart: { renderTo: string; }; credits: { enabled: false; }; 
title: { text: string; }; xAxis: { ...' is not assignable to parameter of type 'Options'.
Types of property 'series' are incompatible.
Type '({ name: any; data: number[][]; type: "column"; yAxis: number; color: string; } | { 
name: any; ty...' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | 
SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'.
Type '{ name: any; data: number[][]; type: "column"; yAxis: number; color: string; } | { name: 
any; typ...' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | 
SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.
Type '{ name: any; data: number[][]; type: "column"; yAxis: number; color: string; }' is not 
assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions 
| SeriesAreaOptions | ...'.
Type '{ name: any; data: number[][]; type: "column"; yAxis: number; color: string; }' is not 
assignable to type 'SeriesColumnOptions'.
Types of property 'data' are incompatible.
Type 'number[][]' is not assignable to type '(number | [string | number, number] | 
SeriesColumnDataOptions)[]'.
Type 'number[]' is not assignable to type 'number | [string | number, number] | 
SeriesColumnDataOptions'.
Type 'number[]' has no properties in common with type 'SeriesColumnDataOptions'.

Does any one have any thoughts what am I doing wrong?

Source: Angular Questions

Published
Categorized as angular, angular2-highcharts, highcharts Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq