How to make Gauge chart dynamic as speedometer in angular 4

[yashjit]

Needed Dynamic charts using angular 4 - Observed no such way to make dynamic gauge chart in angular 4.

Code -

1. Component File - _speedMeter(){ //Speed this.speedometer = { chart: { type: 'gauge', plotBackgroundColor: null, plotBackgroundImage: null, plotBorderWidth: 0, plotShadow: false, marginRight: 0, height: 180, },

   title: { text: 'Speed' }, credits: { enabled: false }, pane: { size: 140, startAngle: -130, endAngle: 130,

      background: [{
          backgroundColor: {
              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
              stops: [
                  [0, '#FFF'],
                  [1, '#333']
              ]
          },
          borderWidth: 0,
          outerRadius: '100%'
      }, {
          backgroundColor: {
              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
              stops: [
                  [0, '#333'],
                  [1, '#FFF']
              ]
          },
          borderWidth: 1,
          outerRadius: '100%'
      }, {
          // default background
      }, {
          backgroundColor: '#DDD',
          borderWidth: 0,
          outerRadius: '100%',
          innerRadius: '100%'
      }]
   

   },

   // the value axis yAxis: { min: 0, max: 200,

      minorTickInterval: 'auto',
      minorTickWidth: 1,
      minorTickLength: 10,
      minorTickPosition: 'inside',
      minorTickColor: '#666',
   
      tickPixelInterval: 30,
      tickWidth: 2,
      tickPosition: 'inside',
      tickLength: 10,
      tickColor: '#666',
      labels: {
          step: 2,
          rotation: 'auto'
      },
      title: {
          text: 'km/h',
          y: 90,
          verticalAlign: 'bottom'
      },
      plotBands: [{
          from: 0,
          to: 120,
          color: '#55BF3B' // green
      }, {
          from: 120,
          to: 160,
          color: '#DDDF0D' // yellow
      }, {
          from: 160,
          to: 200,
          color: '#DF5353' // red
      }]
   

   },

   series: [{ name: 'Speed', data: [100] // data: (function () { // setInterval(function () { // var point = this.speedometer.series[0].points[0], // newVal, // inc = Math.round((Math.random() - 0.5) * 20);

      //           newVal = point.y + inc;
      //           if (newVal < 0 || newVal > 200) {
      //               newVal = point.y - inc;
      //           }
   
      //           point.update(newVal);
   
      //         }, 3000);
   
      //       }()),
   

   }] } const g = this;

   setInterval(function () {

   // g.speedometer['series'][0].data[0].update(Math.round((Math.random() - 0.5) * 20))
   
    let point = g.speedometer['series'][0].data[0]
    let newVal: any
    let inc = Math.round((Math.random() - 0.5) * 20);
    newVal = point + inc;
    if (newVal < 0 || newVal > 200) {
        newVal = point - inc;
    }
    console.log('new',newVal)
        //point.update(newVal);
   
    console.log('speed',g.speedometer['series'][0].data[0])
   

   }, 2000);

} // end speedometer()_

2. Module Code - // Highcharts _import { ChartModule } from 'angular2-highcharts'; import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

import * as highchart from 'highcharts'; import * as highchartsHeatmap from 'highcharts/modules/heatmap'; import * as highchartsTreemap from 'highcharts/modules/treemap'; import * as HighchartsDrilldown from 'highcharts/modules/drilldown'; // Service import { AceDeviceService } from "../device/device.service"; // For loading highcharts declare let require:any; export function highchartsFactory() { const hc = require('highcharts'); const hcm = require('highcharts/highcharts-more'); const exporting = require('highcharts/modules/exporting'); const sg = require('highcharts/modules/solid-gauge');

hcm(hc);
highchartsHeatmap(hc);
highchartsTreemap(hc);
HighchartsDrilldown(hc);
exporting(hc);
sg(hc);
return hc;

}_ Need help. Solution specific to Angular 4 required.

[Jrubzjeknf]

This question is probably more appropriate at the highcharts github or stackoverflow.