How to make Gauge chart dynamic as speedometer in angular 4

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

Code -

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()_

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.

gevgeny / angular2-highcharts

How to make Gauge chart dynamic as speedometer in angular 4 #264