title: Angular : SetData to HighChart widget from an array object
body: <p>i'm using under my ANgular component a <strong>highchart</strong> widget :</p>
  
  <p><strong>DEMO OF THE CHART :</strong> <a href="https://www.highcharts.com/demo/pie-legend" rel="nofollow noreferrer">https://www.highcharts.com/demo/pie-legend</a></p>
  
  <p>from the documentation , using it is like that :</p>
  
  <pre><code>Highcharts.chart('divChart', {
            chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false,
              type: 'pie'
            },
            title: {
              text: this.nb
            },
            tooltip: {
              pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'
            },
            plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: false
                },
                showInLegend: true
              }
            },
            series: [{
              name: 'Brands',
              colorByPoint: true,
              data: [{
                name: 'Microsoft Internet Explorer',
                y: 56.33
              }, {
                name: 'Chrome',
                y: 24.03,
                sliced: true,
                selected: true
              }, {
                name: 'Firefox',
                y: 10.38
              }, {
                name: 'Safari',
                y: 4.77
              }, {
                name: 'Opera',
                y: 0.91
              }, {
                name: 'Proprietary or Undetectable',
                y: 0.2
              }]
            }]
          });
  </code></pre>
  
  <p>But since am loading dynamically the datat ( chrome , firefox ...) , 
  i have now a set fo key/ value data indicationg each browser with its value :</p>
  
  <pre><code>  browsers: {[key: string ]: number } = {};
  </code></pre>
  
  <p><strong>for example my browsers list contains :</strong></p>
  
  <p>chrome (name) <strong>-></strong> 60 (value)</p>
  
  <p>firefox <strong>-></strong> 30</p>
  
  <p>edge <strong>-></strong> 10</p>
  
  <p>....</p>
  
  <p>i wanna inject my browsers list values dynamically to the data of the chart , and not mannually , since my list may contain numerous values.</p>
  
  <p>i think there were some methode called <strong>setData</strong> , but i don't know if it's usefull.</p>
  
  <p><strong>Ideas ?</strong></p>