In my ongoing project, I am utilizing Angular 6 along with TypeScript. The objective is to incorporate a Solidgauge in one of my Components. However, as I proceeded with the development of this component, I encountered some challenges:
When attempting to display the Gauge on the interface, nothing appears, and Highcharts error #17 is displayed in the console. My suspicion is that the issue stems from how I imported Highcharts-more into my component.
Contents of my throughput.component.ts file
import { Component, OnInit, OnDestroy, Input} from '@angular/core';
import { UsageService } from '../../services/UsageService';
import { Subscription } from 'rxjs';
import * as Highcharts from 'highcharts/highcharts';
import 'highcharts/modules/exporting';
import * as more from 'highcharts-more/more';
import * as solidgauge from 'highcharts/modules/solid-gauge';
more(Highcharts);
@Component({
selector: 'app-throughput',
templateUrl: './throughput.component.html',
styleUrls: ['./throughput.component.css'],
})
export class ThroughputComponent implements OnInit, OnDestroy {
public messageCount: number;
public chart: any;
constructor() {
this.messageCount = 0;
}
ngOnInit(): void {
this.initChart(this.buildGauge());
}
ngOnDestroy() {}
private buildGauge(): any {
return {
// Chart configuration here...
};
}
private initChart(gaugeOptions: any) {
this.chart = Highcharts.chart('gauge-container',
Highcharts.merge(gaugeOptions, {
// Additional options for the chart.
}));
}
Contents of my throughput.component.html file
<div id='gauge-container' style="width: 300px; height: 200px"></div>
Contents of my app.module.ts
import { BrowserModule } from '@angular/platform-browser';
// Other imports...
@NgModule({
declarations: [
// Components declared here
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatButtonModule,
MatGridListModule,
RouterModule.forRoot([
// Routes defined here
])
],
providers: [GatewayService],
bootstrap: [AppComponent]
})
export class AppModule { }
If anyone could provide insight into what might be going awry in my implementation or if there are steps I may have overlooked, it would be greatly appreciated.
Note: In the most recent iteration of my code, I attempted separate installations of highcharts-more and highcharts via npm.