How to set pie chart wedge colors based on wedge values for highcharts?

Question

I'm building a pie chart in Highcharts: http://jsfiddle.net/y3j8ybrg/

I want to be able to set the background color of each wedge based on the value of the data that wedge represents.

The API documentation doesn't seem to make this available. It shows how one can use a closure or function to generate the colors array but not how one can give that function access to the point value.

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button">Add point</button>

JavaScript:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            plotBackgroundColor: '#323f48',
            plotBorderColor: '#323f48',
            plotBorderWidth: 0,
            plotShadow: false,
            backgroundColor: '#323f48',
            borderColor: '#323f48'
        },
        title: {
            text: 'CHART<br/><span class="white">sub-header</span>',
            align: 'center',
            verticalAlign: 'middle',
            y: -3,
            style: {
              fontWeight: 'bold',
              color: 'white',
              fontSize: '10px'
            }
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {

                dataLabels: {
                    enabled: true,
                    distance: -510,
                    style: {
                        fontWeight: 'bold',
                        color: '#323f48'
                    }
                },
                startAngle: -180,
                endAngle: 180,
                center: ['50%', '50%'],
                animation: false,
                borderColor: '#323f48',
                borderWidth: '0px'
            }
        },
        series: [{
            type: 'pie',
            name: 'days',
            innerSize: '90%',
            data: [
                ['empty',       56.00],
                ['days',        44.00],
            ],
            // I want this to be a function that returns a color depending upon the data series point value.
            colors: (function(){return [
              '#59636b',
              '#8edd65'
            ]})(),
        }],
    });
});

wergeld wergeld · Accepted Answer · 2017-01-19T17:01:22

Probably best to either pre-calculate the colors and create the data array as {x: 'empty', y: 56.00, color: '#somecolorhex',.. or to update the colors on load in a chart.events.load call. You could add the getColor() function in the data element as well but you would have to repeat the data value.

  getColor = function(val) {
    if (val >= 50) {
      return 'red'
    } else {
      return 'blue'
    }
  }

series: [{
  type: 'pie',
  name: 'days',
  innerSize: '90%',
  data: [{
    x: 'empty',
    y: 56.00,
    color: getColor(56.00)
  }, {
    x: 'days',
    y: 44.00,
    color: getColor(44.00)
  }]
}]

Sample jsfiddle

How to set pie chart wedge colors based on wedge values for highcharts?

1 Answers