0

I am using Angular and Higcharts to visualize some data. I have gotten many of the other Highchart components working, now I want to use the gauges. I went to the Highcharts website and used the example at their demo section. Unfortunately this is not working. For some reason the gauge is blank but the other parts of my component shows up. Example below: enter image description here

My code looks like this:

TS file

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

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

  chartOptions: any;

  Highcharts: typeof Highcharts = Highcharts;
  chartRef: Highcharts.Chart;
  updateFromInput = false;

  constructor() { }

  ngOnInit(): void {
    this.myChart();
  }

  chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
    this.chartRef = chart;
  };

  myChart(){
    this.chartOptions = {
        chart: {
            type: 'solidgauge'
        },

        title: null,

        pane: {
            center: ['50%', '85%'],
            size: '140%',
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                innerRadius: '60%',
                outerRadius: '100%',
                shape: 'arc'
            }
        },

        exporting: {
            enabled: false
        },

        tooltip: {
            enabled: false
        },

        // the value axis
        yAxis: {
            stops: [
                [0.1, '#55BF3B'], // green
                [0.5, '#DDDF0D'], // yellow
                [0.9, '#DF5353'] // red
            ],
            lineWidth: 0,
            tickWidth: 0,
            minorTickInterval: null,
            tickAmount: 2,
            title: {
                y: -70
            },
            labels: {
                y: 16
            }
        },

        plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,
                    borderWidth: 0,
                    useHTML: true
                }
            }
      }


}

    setTimeout(() => {
    window.dispatchEvent(
      new Event('resize')
    );
    }, 300);
   }

}

HTML file

<p>speedo works!</p>

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
  [(update)]="updateFromInput"
  [callbackFunction]="chartCallback">
</highcharts-chart>

Does anyone know what is wrong with this code. How can I fix it so that the gauge actually shows up?

If anyone can recommend any other package I can use to show real time data on a gauge I would appreciate it. This package should be easy to use, or at least have more resources than Highcharts where one can find tutorials an so on.

Thanks in advance!

Paul Brink
  • 332
  • 1
  • 4
  • 21

1 Answers1

0

There are a few glitches:

  1. The highcharts-more module is missing. Import it at the begging
import HC_more from "highcharts/highcharts-more";
HC_more(Highcharts);
  1. Your demo was not working simply because there was nothing to show. All you have to do to fix this is to set the data in the series object. Remember to always add the series type for each series.
   series: [
      {
        type: "gauge",
        data: [80]
      }
    ]

Also, I highly recommend Highhcarts official documentation where you might find more examples and descriptions.

API:
https://api.highcharts.com/highcharts/series.gauge
https://github.com/highcharts/highcharts-angular
Demo:
https://stackblitz.com/edit/highcharts-angular-gauge

Karol Kołodziej
  • 652
  • 4
  • 9