the highcharts colour option can be added to a specific series within a chart definition. so it can be added to a specific drilldown series as well:

drilldown: {
  series: [
      name: "chrome",
      id: "chrome",
      colors: [

i am not aware of any methods within highcharts to easily colour a specific pie slice. by default, the colours from the colors array will fill the slices in the same order the data is provided. if possible, it might help to control the colours by sorting the drilldown data to ensure the highest value is predictably filled with the first colour in the colors array.

documentation: highcharts colours


i've always found that when i want to do very specific things with highcharts and colors, you need to pre-setup your data with a color attribute. so, let's assume you have already constructed your data in a way that highcharts will understand it:

// data formatted so it can be dropped directly into
// a highcharts pie-chart
let top_data = [
        name: "internet explorer",
        y: 7.23,
        drilldown: "internet explorer"
        name: "chrome",
        y: 62.74,
        drilldown: "chrome"
        name: "firefox",
        y: 10.57,
        drilldown: "firefox"
        name: "safari",
        y: 5.58,
        drilldown: "safari"
        name: "edge",
        y: 4.02,
        drilldown: "edge"
        name: "opera",
        y: 1.92,
        drilldown: "opera"
        name: "other",
        y: 7.62,
        drilldown: null

and now you need to ensure that the largest category gets a specific color, so we will go ahead and sort the data:

// sort in descending order 
// (this makes sure the 0th entry is the largest)
top_data.sort(function(a,b) {return b.y-a.y});

now, you can add the color property to each of your blocks:

// color for largest slice
let top_color = 'blue';
// color array for the rest of the colors
let colors = highcharts.getoptions().colors;
top_data.foreach((dat,d) => {
  if (d==0) {
    // assign first (largest) entry to dedicated color  
    dat['color'] = top_color;
  } else {
    // assign slice to next color in list
    dat['color'] = colors[(d-1)%colors.length];

now you pass this as the data object to the series parameter of the chart configuration.

in order to create a unique list of colors for the drilldown slices, you can set the array of colors in the colors parameter of the chart. these colors will the propagate to the drilldown pie slices (without overriding any unique colors you specified for the top-level pie-chart slices). the final chart will have the following form:

// create the chart
highcharts.chart('container', {
    chart: {
        type: 'pie'
    colors: ['blue', 'green', 'red'], // or any other unique list of colors

    /* all your other config parameters ... */

    series: [
            name: "browsers",
            colorbypoint: true,
            data: top_data
    /* and the rest, like your drilldown data */

Related Query

More Query from same tag