title: Can you run Highcharts with dynamic data in angular JS with require.js?
body: <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="thumbnail alert-info alert alert-dismissible fade in"&gt;
              &lt;p class="lead text-center"&gt; Our Dynamic KPI&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="scripts/cad.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" class="chart"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS script</p>
  
  <pre><code>$.get('scripts/dataCAD.csv', function(csv) {
      $('#container').highcharts({
          chart: {
              type: 'column'
          },
          data: {
              csv: csv
          },
          title: {
              text: 'CAD'
          },
          yAxis: {
              title: {
                  text: 'Units'
              }
         }
      });
  });
  </code></pre>
  
  <p>Component in angular 2</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  @Component({
      selector: 'cad',
      templateUrl: './cad.html'
  })
  export class cadcomponent {
  
  }
  </code></pre>
  
  <p>I have other scripts working in my application by using <code>require.js</code> and they are all working perfectly however I am not getting an error in the console for this highcharts page but there is No data displayed.</p>
  
  <p>I did look at this <a href="https://www.npmjs.com/package/angular2-highcharts#faq" rel="nofollow noreferrer">FAQ link</a>  however i couldn't make it work. if anyone has any experience with highcharts and angular 2 any help would be greatly appreciated!</p>