In my current project I'm using Angular 6 and typescript. My plan is to use an Solidgauge on one of my Components. During the production of my pentent I run into the following problems:

When i try to display the Gauge on my display nothing shows and in console Highcharts error #17 is showing. My suspiscion is that the cause of my problem lies in the way I'm importing Highcharts-more in my ponent.

My thoughputponent.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: './throughputponent.html',
  styleUrls: ['./throughputponent.css'],
})

export class ThroughputComponent implements OnInit, OnDestroy {
  // private updataDataEndRef: Subscription = null;
  public messageCount: number;
  public chart: any;
 // @Input() usageService: UsageService;

 constructor() {
   this.messageCount = 0;
 }

 ngOnInit(): void {
   this.initChart(this.buildGauge());
 }

 ngOnDestroy() {
   // this.updataDataEndRef.unsubscribe();
 }

 // noinspection JSMethodCanBeStatic
 private buildGauge(): any {
    return {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) 
        || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
       }
    },
    tooltip: {
      enabled: false
    },
    yAxis: {
      stops: [
        [0.1, '#55BF3B'],
        [0.5, '#DDDF0D'],
        [0.9, '#DF5353']
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };
}

private initChart(gaugeOptions: any) {
  this.chart = Highcharts.chart('gauge-container', 
              Highcharts.merge(gaugeOptions, {
   yAxis: {
     min: 0,
     max: 200,
     title: {
       text: 'Speed'
     }
   },
   credits: {
     enabled: false
   },
   series: [{
     name: 'Speed',
     data: [80],
     dataLabels: {
       format: '<div style="text-align:center"><span style="font- 
                   size:25px;color:' +
                   ((Highcharts.theme && Highcharts.theme.contrastTextColor) 
                    || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">km/h</span></div>'
      },
      tooltip: {
        valueSuffix: ' km/h'
      }
    }]
  }));
}

My thoughputponent.html file

<div id='gauge-container' style="width: 300px; height: 200px"></div>

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform- 
         browser/animations';
import { MatCardModule, MatButtonModule, MatGridListModule } from        
       '@angular/material';
import { RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

import { GatewayService } from './services/GatewayService';
import { AppComponent } from './ponents/app/appponent';
import { GatewayComponent} from './ponents/gateway/gatewayponent';
import { GatewayControlComponent} from 
           './ponents/gatewaycontrol/gatewaycontrolponent';
import { TopmenuComponent} from './ponents/topmenu/topmenuponent';
import { SidemenuComponent} from './ponents/sidemenu/sidemenuponent';
import { GatewayDataDisplayComponent} from 
       './ponents/gatewaydatadisplay/gatewaydatadisplayponent';
import { ThroughputComponent } from 
       './ponents/throughputdisplay/throughputponent';

@NgModule({
  declarations: [
     AppComponent,
     GatewayComponent,
     TopmenuComponent,
     SidemenuComponent,
     GatewayControlComponent,
     GatewayDataDisplayComponent,
     ThroughputComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatCardModule,
     MatButtonModule,
     MatGridListModule,
     RouterModule.forRoot([
       { path: '', redirectTo: 'home', pathMatch: 'full' },
       { path: 'home', ponent: AppComponent },
       { path: 'control', ponent: GatewayControlComponent},
       { path: 'gateways', ponent: GatewayComponent },
       { path: '**', redirectTo: 'home' }
     ])
   ],
   providers: [GatewayService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Please can someone tell me what I'm doing wrong here? Or is there something I forgot to do?

Ps. In the current version of my code I tried to install highcharts-more and hightcharts separately by using npm.

In my current project I'm using Angular 6 and typescript. My plan is to use an Solidgauge on one of my Components. During the production of my pentent I run into the following problems:

When i try to display the Gauge on my display nothing shows and in console Highcharts error #17 is showing. My suspiscion is that the cause of my problem lies in the way I'm importing Highcharts-more in my ponent.

My thoughput.ponent.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.ponent.html',
  styleUrls: ['./throughput.ponent.css'],
})

export class ThroughputComponent implements OnInit, OnDestroy {
  // private updataDataEndRef: Subscription = null;
  public messageCount: number;
  public chart: any;
 // @Input() usageService: UsageService;

 constructor() {
   this.messageCount = 0;
 }

 ngOnInit(): void {
   this.initChart(this.buildGauge());
 }

 ngOnDestroy() {
   // this.updataDataEndRef.unsubscribe();
 }

 // noinspection JSMethodCanBeStatic
 private buildGauge(): any {
    return {
      chart: {
        type: 'solidgauge'
      },
      title: null,
      pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) 
        || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
       }
    },
    tooltip: {
      enabled: false
    },
    yAxis: {
      stops: [
        [0.1, '#55BF3B'],
        [0.5, '#DDDF0D'],
        [0.9, '#DF5353']
      ],
      lineWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    }
  };
}

private initChart(gaugeOptions: any) {
  this.chart = Highcharts.chart('gauge-container', 
              Highcharts.merge(gaugeOptions, {
   yAxis: {
     min: 0,
     max: 200,
     title: {
       text: 'Speed'
     }
   },
   credits: {
     enabled: false
   },
   series: [{
     name: 'Speed',
     data: [80],
     dataLabels: {
       format: '<div style="text-align:center"><span style="font- 
                   size:25px;color:' +
                   ((Highcharts.theme && Highcharts.theme.contrastTextColor) 
                    || 'black') + '">{y}</span><br/>' +
               '<span style="font-size:12px;color:silver">km/h</span></div>'
      },
      tooltip: {
        valueSuffix: ' km/h'
      }
    }]
  }));
}

My thoughput.ponent.html file

<div id='gauge-container' style="width: 300px; height: 200px"></div>

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform- 
         browser/animations';
import { MatCardModule, MatButtonModule, MatGridListModule } from        
       '@angular/material';
import { RouterModule } from '@angular/router';
import { AngularFontAwesomeModule } from 'angular-font-awesome';

import { GatewayService } from './services/GatewayService';
import { AppComponent } from './ponents/app/app.ponent';
import { GatewayComponent} from './ponents/gateway/gateway.ponent';
import { GatewayControlComponent} from 
           './ponents/gatewaycontrol/gatewaycontrol.ponent';
import { TopmenuComponent} from './ponents/topmenu/topmenu.ponent';
import { SidemenuComponent} from './ponents/sidemenu/sidemenu.ponent';
import { GatewayDataDisplayComponent} from 
       './ponents/gatewaydatadisplay/gatewaydatadisplay.ponent';
import { ThroughputComponent } from 
       './ponents/throughputdisplay/throughput.ponent';

@NgModule({
  declarations: [
     AppComponent,
     GatewayComponent,
     TopmenuComponent,
     SidemenuComponent,
     GatewayControlComponent,
     GatewayDataDisplayComponent,
     ThroughputComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     MatCardModule,
     MatButtonModule,
     MatGridListModule,
     RouterModule.forRoot([
       { path: '', redirectTo: 'home', pathMatch: 'full' },
       { path: 'home', ponent: AppComponent },
       { path: 'control', ponent: GatewayControlComponent},
       { path: 'gateways', ponent: GatewayComponent },
       { path: '**', redirectTo: 'home' }
     ])
   ],
   providers: [GatewayService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

Please can someone tell me what I'm doing wrong here? Or is there something I forgot to do?

Ps. In the current version of my code I tried to install highcharts-more and hightcharts separately by using npm.

• javascript
• angular
• typescript
• highcharts
• gauge

• you only installed highcharts-more? – Shanil Arjuna Commented Aug 29, 2018 at 9:04
• No I installed the Highcharts package and the high-chart more package. I'm sorry for the confusion. – Henderikus Harms Commented Aug 29, 2018 at 9:07

3 Answers 3

Include all:

• highcharts
• highcharts-more
• solid-gauge module

For example:

import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

// Now init modules:
HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);

To extend Pawel Fus's answer and following the angular-highcharts library documentation:

// app.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src'
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge'

...
imports: [ ChartModule ],
providers: [
    { 
        provide: HIGHCHARTS_MODULES, 
        useFactory: () => [HighchartsMore, HighchartsSolidGauge] 
    },
]
...

import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge'; 
HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);

the code above doesn't work for me but the code below works for me. I have Angular CLI version 9.1.7.

import * as Highcharts from 'highcharts/highcharts';
import HighchartsMore from 'highcharts/highcharts-more.src';
import HighchartsSolidGauge from 'highcharts/modules/solid-gauge';

HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);