title: Highcharts Angular dynamic update
body: <p>I want to update my Highcharts gauge with a value from my <code>Observable</code> subscription below, but I can't figure out how to feed the <code>series: data: []</code> value. I've looked at highchart examples but they all have static data in them. I cannot find any clear Angular documentation or a good Angular example to learn from. I'd appreciate any help.  Here's my ts file source code:</p>
  
  <pre><code>import { Component, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
  import { AuthService } from '../../../../services/auth.service';
  import { TempsService } from '../../../shared/temps.service';
  import { Temps } from '../../../shared/temps.model';
  import More from 'highcharts/highcharts-more';
  import { chart } from 'highcharts';
  import * as Highcharts from 'highcharts';
  
  More(Highcharts);
  
  @Component({
  selector: 'app-gauge',
  styleUrls: [ './gauge.component.css'],
  templateUrl: './gauge.component.html'
  })
  
  export class GaugeComponent implements AfterViewInit, OnInit {
  
  private controller: string;
  TT: number;
  
  @ViewChild('container', { read: ElementRef }) container: ElementRef;
  
  constructor(private tempsService: TempsService, public authService: AuthService) { }
  
  ngOnInit() {
  
  this.authService.isLoginSubject.subscribe((photon) =&gt; {
    console.log(photon + ' is registered controller in gauge.component');
    this.controller = photon;
  });
  
  }
  
  ngAfterViewInit() {
  
    this.tempsService.getGaugeTemps(this.controller);
  
  if (this.tempsService.currentSubjectTT != null) {
    this.tempsService.currentSubjectTT.subscribe((tt) =&gt; {
      console.log('Target Temp is: ' + tt);
      this.TT = tt;
      // I WANT TO UPDATE THE GAUGE HERE...WITH THE VALUE IN this.TT
    });
  }
  
      Highcharts.chart(this.container.nativeElement, {
  
        credits: {enabled: false},
  
        plotOptions: {
          gauge: {
            dataLabels: {
              padding: 80,
              borderWidth: 0,
              style: {
                fontSize: '30px'
              }
            }
          }
        },
  
        chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false,
          margin: [0, 0, 0, 0],
          spacingTop: 0,
        },
  
        title: {
          text: null
        },
  
        pane: {
          startAngle: -150,
          endAngle: 150,
          background: [{
            backgroundColor: {
              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
              stops: [
                [0, '#FFF'],
                [1, '#333']
              ]
            },
              borderWidth: 0,
              outerRadius: '109%'
          }, {
            backgroundColor: {
              linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                  [0, '#333'],
                  [1, '#FFF']
                ]
              },
              borderWidth: 1,
              outerRadius: '107%'
          }, {
              // default background
          }, {
             backgroundColor: '#DDD',
             borderWidth: 0,
             outerRadius: '105%',
             innerRadius: '103%'
          }]
        },
  
        // the value axis
        yAxis: {
            min: 0,
            max: 500,
            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',
            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 15,
            tickColor: '#666',
            labels: {
                step: 4,
                rotation: 'auto'
            },
            title: {
                text: 'F°'
            },
            plotBands: [{
                from: 0,
                to: 150,
                color: '#C0C0C0' // gray
            }, {
                from: 151,
                to: 225,
                color: '#55BF3B' // green
            }, {
                from: 226,
                to: 300,
                color: '#DDDF0D' // yellow
            }, {
                from: 301,
                to: 500,
                color: '#DF5353' // red
            }]
        },
  
        series: [{
            name: 'Grill',
            data: [0],
            tooltip: {
                valueSuffix: ' F°'
            }
        }]
      });
  
    }
  
  }
  </code></pre>