title: (Angular 4) Highcharts changing data doesn't update chart
body: <p>I have a chart like this:</p>
  
  <pre><code>&lt;chart [options]="options"&gt;&lt;/chart&gt;
  </code></pre>
  
  <p>where the options are defined in the component constructor like this:</p>
  
  <pre><code>options;
  
  initChart(){
      this.options = {
        title : { text : 'original title' },
        series: [{
          data: [],
        }]
      };
    }
  </code></pre>
  
  <p>Now when I call this function:</p>
  
  <pre><code>changeTitle(){
    this.options.title.text = 'different title';
    console.log(this.options.title.text);
  }
  </code></pre>
  
  <p>I can see in the console that the title changed, but in the chart itself it's still the original title.</p>
  
  <p>However, if I create a new options object and overwrite the old one like this:</p>
  
  <pre><code>  changeTitle2(){
      this.options = {
        title : { text : 'different title' },
        series: [{
          data: [],
        }]
      };
    }
  </code></pre>
  
  <p>Everything works fine. Now I don't want to do it this way, because I want to be able to just push additional data points to the chart without redrawing everything like presented here: <a href="http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/demo/dynamic-update/" rel="nofollow noreferrer">Link</a></p>
  
  <p>I realise they use a chart object there, not a JSON object for the data, but for some reason, I am unable to create a chart object in the component using <code>var x = Highcharts.chart(...);</code>, I get this error I don't understand: </p>
  
  <blockquote>
    <p>'Highcharts' refers to a UMD global, but the current file is a module. Consider adding an import instead.</p>
  </blockquote>
  
  <p>I tried importing everything, but it just won't work...</p>