How to create a solid gauge chart with Highcharts in angular 6?

1
votes

enter image description hereI want to create a solid guage chart in highcharts in angular 6.I tried with other charts its working fine but guage chart is not working.I have already imported the plugin but its not able to find the type of chart.Here is the code below also I have created a demo in this link https://stackblitz.com/edit/angular-yw3xwa?file=src%2Fapp%2Fapp.module.ts .

app.component.html

<div #referenceKeyName (click)="onClickMe(referenceKeyName)" id="chart2"></div>

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HighchartsChartModule } from "highcharts-angular";
@NgModule({
  imports:      [ BrowserModule, FormsModule,HighchartsChartModule
  ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

declare var require: any;
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
const HighchartsMore = require("highcharts/highcharts-more.src");
HighchartsMore(Highcharts);
const HC_solid_gauge = require("highcharts/modules/solid-gauge.src");
HC_solid_gauge(Highcharts);
import * as Exporting from 'highcharts/modules/exporting';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  clickMessage = '';
  name = 'Angular';
  onClickMe(referenceKeyName) {
  alert(referenceKeyName.id);
}
  ngOnInit(){
  this.chartFunc('chart2');
  }
  chartFunc(chartId){
  Highcharts.chart(chartId,{
   chart: {
         'type': 'solidGauge'
      },
      title: {
         text: "Monthly Average Temperature"
      },
     'pane': {
          'center': ['50%', '50%'],
          'size': '300px',
          'startAngle': 0,
          'endAngle': 360,
          'background': {
            'backgroundColor': '#EEE',
            'innerRadius': '90%',
            'outerRadius': '100%',
            'borderWidth': 0
          }
        },
        'yAxis': {
          'min': 0,
          'max': 100,
          'labels': {
            'enabled': false
          },

          'lineWidth': 0,
          'minorTickInterval': null,
          'tickPixelInterval': 400,
          'tickWidth': 0
        },
        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },
      'series': [{
            'name': 'Speed',
            'data': [50],
            'dataLabels': {
                'enabled': false
            }
        }]
   });
}
}
1
javascriptangularhighcharts

1 Answers

2
votes

You have made a simple typo. The solid gauge series is called solidgauge instead of solidGauge.

chart: {
  'type': 'solidgauge'
}

Demo: