Highcharts Pie Chart Specify Pie Slice Gradient Color

Question

I have a Highcharts Pie Chart and I am using radial gradients.

Demo: http://jsfiddle.net/19vyugeL/1/

Issue: Apply specific gradient color to specific pie slice. For a normal color I use the color: on the data, but I dont know how to do that with the gradients.

Goal: I want the "Remaining" budget slice the color it currently is and all the "Spent" slices the other color (green).

  $(function () {

       // Create the chart
       $('#container9').highcharts({
           colors: [{
               radialGradient: {
                   cx: 0.5,
                   cy: 0.3,
                   r: 0.7
               },
               stops: [
                   [0, RemainingColor1],
                   [1, RemainingColor2]
               ]
           }, {
               radialGradient: {
                   cx: 0.5,
                   cy: 0.3,
                   r: 0.7
               },
               stops: [
                   [0, SpentColor1],
                   [1, SpentColor2]
               ]
           }],
           chart: {
               type: 'pie',
               marginTop: 50,
               marginBottom: 5,
           },
           title: {
               text: 'Total Budget - $440,000'
           },
           subtitle: {
               text: 'Total Spent - $103,057'
           },
           plotOptions: {
               series: {
                   borderWidth: 2
               },
               pie: {
                   allowPointSelect: true,
                   borderWidth: 3,
                   borderColor: 'black',
                   dataLabels: {
                       style: {
                           fontSize: 9,
                       },

                       distance: -1,
                       y: -10,
                       x: 10,
                       color: TextColor,
                       enabled: true,
                       inside: true,
                       verticalAlign: 'top',
                       format: '{point.name}<br/> {point.y}%<br/>${point.spend}'
                   }
               },
           },

           tooltip: {
               headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
               pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% -  ${point.spend} of Total'
           },
           series: [{
               name: new Date().getFullYear() + " National Spend ",

               data: [{
                   name: new Date().getFullYear() + " Remaining Budget",
                   y: 79,
                   spend: '336,943',
                   // color: RemainingColor1,

               }, {
                   name: "Wave 2",
                   y: 23,
                   // color: SpentColor1,
                   spend: '97,693'
               }, {
                   name: "Wave 3",
                   y: 3,
                   // color: SpentColor1,
                   spend: '5,364',


               }]
           }]

       });
   });

Barbara Laird Barbara Laird · Accepted Answer · 2015-08-12T20:49:23

Define the array colors, and then you can access it when you assign the color:

 $(function () {

       colors = [{
               radialGradient: {
                   cx: 0.5,
                   cy: 0.3,
                   r: 0.7
               },
               stops: [
                   [0, RemainingColor1],
                   [1, RemainingColor2]
               ]
           }, {
               radialGradient: {
                   cx: 0.5,
                   cy: 0.3,
                   r: 0.7
               },
               stops: [
                   [0, SpentColor1],
                   [1, SpentColor2]
               ]
           }];

       // Create the chart
       $('#container9').highcharts({
           chart: {
               type: 'pie',
               marginTop: 50,
               marginBottom: 5,
           },
           title: {
               text: 'Total Budget - $440,000'
           },
           subtitle: {
               text: 'Total Spent - $103,057'
           },
           plotOptions: {
               series: {
                   borderWidth: 2
               },
               pie: {
                   allowPointSelect: true,
                   borderWidth: 3,
                   borderColor: 'black',
                   dataLabels: {
                       style: {
                           fontSize: 9,
                       },

                       distance: -1,
                       y: -10,
                       x: 10,
                       color: TextColor,
                       enabled: true,
                       inside: true,
                       verticalAlign: 'top',
                       format: '{point.name}<br/> {point.y}%<br/>${point.spend}'
                   }
               },
           },

           tooltip: {
               headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
               pointFormat: '<span style="color:{point.color}">{point.name}</span>: {point.y:.2f}% -  ${point.spend} of Total'
           },
           series: [{
               name: new Date().getFullYear() + " National Spend ",

               data: [{
                   name: new Date().getFullYear() + " Remaining Budget",
                   y: 79,
                   spend: '336,943',
                   color: colors[0],

               }, {
                   name: "Wave 2",
                   y: 23,
                   color: colors[1],
                   spend: '97,693'
               }, {
                   name: "Wave 3",
                   y: 3,
                   color: colors[1],
                   spend: '5,364',


               }]
           }]

       });
   });

http://jsfiddle.net/19vyugeL/3/

Highcharts Pie Chart Specify Pie Slice Gradient Color

1 Answers