Angular - How to implement HighCharts to use gauge chart

Question

In my current Angular project, I'm trying to show a statistic using the gauge chart. I'm using the HighCharts library I have to mention that I used other types of charts from HighCharts in this project. But after implementing it I got an error in the browser console and nothing happened! The error that I get is as below:

My comparisons.component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { rotateAnimation } from 'src/app/shared/animations';
import * as HighCharts from 'highcharts';
import { StatisticsService } from '../../service/statistics.service';
import { JobPostComparisonOutputDto } from '../../models/job-post-comparison-output.model';

@Component({
    selector: 'app-comparisons',
    templateUrl: './comparisons.component.html',
    styleUrls: ['./comparisons.component.scss'],
    animations: [rotateAnimation]
})
export class ComparisonsComponent implements OnInit {

    @Input() jobPostId: number;
    comparisonsStatistics: JobPostComparisonOutputDto;

    constructor(
      private statisticsService: StatisticsService
    ) {}

    ngOnInit(): void {
      this.statisticsService.getComparisonsStatistics(this.jobPostId).subscribe((res) => {
        this.comparisonsStatistics = res;
        setTimeout(() => {
          this.generateGaugeChart();
        }, 500);
      });
    }

    generateGaugeChart() {
      this.comparisonsStatistics.listOfJobPostComparisonStatisticsPerRound.forEach(res=>{
        HighCharts.chart('gaugeChart_' + res.roundNumber, {
          chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false,
            height: '80%'
          },
          title: {
            text: 'Speedometer'
          },

          pane: {
            startAngle: -90,
            endAngle: 89.9,
            background: null,
            center: ['50%', '75%'],
            size: '110%'
          },

          yAxis: {
            min: 0,
            max: 200,
            tickPixelInterval: 72,
            lineWidth: 0,
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B', // green
                thickness: 20
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D', // yellow
                thickness: 20
            }, {
                from: 160,
                to: 200,
                color: '#DF5353', // red
                thickness: 20
            }]
          },

          series: [{
            type: undefined,
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
          }]

        });
      })
    }
}

My comparisons.component.html:

<div class="row mt-3 bg-white p-2 pt-4 rounded box-shadow" *ngFor="let item of comparisonsStatistics.listOfJobPostComparisonStatisticsPerRound">
   <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div [id]="'gaugeChart_' + item.roundNumber" style="width: 100%; height: 400px; margin: 0 auto"></div>
        </div>
      </div>
    </div>
</div>

I didn't implement any service or module in my comparisons.module.ts related to the HighCharts library and all the previous charts are working.

I've tried to add HighchartsChartModule to my comparisons.module.ts cause I thought the error mentioned is something related to this but nothing changed.

Answer 1

From the JSFiddle demo in the official documentation, it requires to import the "highcharts-more.js":

<script src="https://code.highcharts.com/highcharts-more.js"></script>

For TypeScript way, you should import the highcharts-more as below:

import * as HighCharts from 'highcharts';
import HighChartsMore from 'highcharts/highcharts-more';

HighChartsMore(HighCharts);

Sample Demo @ StackB;itz