title: Highcharts - Pie Chart change slice colors dynamically
body: <p>The chart calls in JSON file that hold a string(color) and integer(count). I want to change the color of the each slice in a pie chart according to what the JSON file holds. So if the JSON file is <code>[["Green",1],["Red",44],["Yellow",30]]</code> I would like the the "Green" slice to have the color of green...etc. I've tried: </p>
  
  <pre><code>plotOptions: {
      pie: {
          //colors: ['#739600', '#bb0826', '#fcc60A'],
          formatter: function () {
                  if ('Green' === this.value) {
                      return '&lt;span style="fill: #739600;"&gt;' + this.value + '&lt;/span&gt;';
                  } 
                  else if ('Red' === this.value) {
                      return '&lt;span style="fill: #bb0826;"&gt;' + this.value + '&lt;/span&gt;';
                  }
                  else if ('Yellow' === this.value) {
                      return '&lt;span style="fill: #fcc60A;"&gt;' + this.value + '&lt;/span&gt;';
                  }
              }, ...
  </code></pre>
  
  <p>It's not working how I expected. <a href="http://jsfiddle.net/LazerickL/bvaxmcLr/4/" rel="nofollow">http://jsfiddle.net/LazerickL/bvaxmcLr/4/</a></p>
  
  <p>Any help would be appreciated. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I had to restructure my JavaScript to call $.getJSON function. So, how would I proceed to implement the color slices for my latest code below? Thanks for any help!</p>
  
  <pre><code>$(document).ready(function() {
  var options = {
      chart: {
          renderTo: 'containter',      
          defaultSeriesType: 'pie',
          options3d: {
              enabled: true,
              alpha: 45
          }
      },
      title: {
          text: null                  
      },
  
      credits: {
          enabled: false              
      },
      tooltip: {
      pointFormat:                    
      '{series.name}: &lt;b&gt;{point.y}&lt;/b&gt;'
  },
  
  plotOptions: {
      pie: {
          //colors: ['#739600', '#bb0826', '#fcc60A'],
          allowPointSelect: true,
          cursor: 'pointer',
          depth: 30, 
          showInLegend: true,         
          dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000000',
              formatter: function () {
                  return '&lt;b&gt;' + this.point.name + '&lt;/b&gt;: ' + this.point.y;
              }
          }
      }
  },
      series: [{
          type: 'pie',
          name: 'Amount',
          data: []
      }]
  }
  
  $.getJSON("js/test.json", function (json) {
      options.series[0].data = json;
      var chart = new Highcharts.Chart(options);
  });
  </code></pre>
  
  <p>});</p>