I'm currently working on an Angular project where I need to display a statistic using a gauge chart. The thing is, I'm utilizing the HighCharts library and it's worth mentioning that I've successfully used other types of charts from HighCharts in this same project. However, when I tried to implement the gauge chart, I encountered an error in the browser console and unfortunately, nothing happened!
Here's the error message I received:
https://i.sstatic.net/FMMTQ.png
This is what my comparisons.component.ts looks like:
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'
}
}]
});
})
}
}
This is the code snippet from 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>
In my comparisons.module.ts, I didn't include any service or module related to the HighCharts library since all previous charts were functioning properly. I even attempted to add HighchartsChartModule to my comparisons.module.ts thinking it might resolve the issue, but unfortunately, no changes occurred.