CODEWITHSUNDEEP
angulartypescripthighcharts
John
John

Reputation: 181

How to render Highcharts to div with id as container - Angular?

I have tried writing the below code. Html:

<div id="container"></div>

Ts Component :

var chart = Highcharts.chart('container', {
 
    chart: {
 
       type: 'bar',
        marginLeft: 100,
         plotAreaWidth: 50,
          plotAreaHeight: 450,
    },
 
    title: {
        text: 'Bar series - data sorting'
    },
 
    yAxis: {
        title: {
            text: ''
        }
    },
 
    xAxis: {
        type: 'category',
        min: 0,
        labels: {
            animate: false
        }
    },
 
    legend: {
        enabled: false
    },
 
    series: [{
        zoneAxis: 'x',
        zones: [{
            value: 2,
            color: 'red'
        }],
        dataLabels: {
            enabled: true,
            format: '{y:,.2f}'
        },
        dataSorting: {
            enabled: true,
            sortKey: 'y'
        },
        data: [["hello",1],["hello",1],["hello",1],["hello",1],]
    }]
 
});

I'm getting the below error:

error TS2769: No overload matches this call.
      Overload 1 of 2, '(options: Options, callback?: ChartCallbackFunction): Chart', gave the following error.
        Type '"container"' has no properties in common with type 'Options'.
    
    426   var chart = Highcharts.chart('container', {

Even though I'm getting error, I can see the chart rendering in container. Can anyone suggest me how to resolve this error, I,m using visual studio as IDE.

THANKS in advance!!!

Upvotes: 3

Views: 4903

Answers (2)

TalatMahmud
TalatMahmud

Reputation: 31

use // @ts-ignore before var chart = Highcharts.chart('container', { ..... }

like below:

// @ts-ignore
var chart = Highcharts.chart('container', {
.....
.....
}

Upvotes: 3

Mateusz Kornecki
Mateusz Kornecki

Reputation: 775

To make it work you need to specify the type for the chartOptions object, and delete from the chartOptions properties that are not valid (there is not such a property like chart.plotAreaHeight,chart.plotAreaWidth or labels.animate). Then you need to specify a type for each series (in your case just add type: 'bar'). As you can see in the demo I attached below, after making those corrections everything is working correctly.

Live demo:
https://stackblitz.com/edit/highcharts-angular-basic-line-dg4fpj

Also, keep in mind that is it recommended to use the official highcharts-angular wrapper while working with the angular. You can find more information about the usage here: https://github.com/highcharts/highcharts-angular

Live demo: (same chart made with highcharts-angular):
https://stackblitz.com/edit/highcharts-angular-basic-line-txhzcr

Upvotes: 2

Related Questions