CODEWITHSUNDEEP
csshighchartspie-chart
benwasin97
benwasin97

Reputation: 263

Highcharts how to make a set number of colors for pie chart data and drilldown data

I am working with Highcharts and working with pie charts specifically pie charts that have a drilldown

Here is an example chart that I use that has a drilldown

https://www.highcharts.com/demo/pie-drilldown

I am rendering my pie chart with data that sometimes has one series item, sometimes is two series, or more which means the pie chart will sometimes have one slice, two slices, or more and I want a certain color to always be on the data with the highest value. I also want the slices to always be any of the colors in an array of colors.

I also want the highcharts drilldown data to always be a certain range of colors. So when we click on one of the slices, the data there should always be in a certain range of colors, this is a similar feature to the one on the pie chart series data, but I want the colors to be different than the pie chart series data.

How can I achieve this?

Thank you

Upvotes: 2

Views: 1103

Answers (2)

Jvinniec
Jvinniec

Reputation: 636

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 */
});

Upvotes: 1

tiffachoo
tiffachoo

Reputation: 131

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: [
        '#db03fc',
        '#03e3fc',
        ...
      ],
      ...
    }
  ]
}

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

Upvotes: 0

Related Questions