CODEWITHSUNDEEP
csshighcharts
Aran Mulholland
Aran Mulholland

Reputation: 23935

Highcharts: Is it possible to style individual pie chart slices?

I would like to style Highcharts individual pie chart slices using css. Highcharts has a way of setting different colours on the pie chart slices but I cannot find an easy way to set these colours through css.

Most of the other questions on SO that come up when doing similar searches relate to styling the labels, not the actual svg paths themselves.

Is this possible, and if so how?

Upvotes: 0

Views: 1365

Answers (2)

Mike T
Mike T

Reputation: 2636

I just ran into this myself, so this is a very late answer, but may be helpful for anyone else who finds themselves here.

In the current version of Highcharts, using the "styled" option, the default Highcharts stylesheet creates a series of 10 selectors like this, numbered 0-9:

.highcharts-color-0 {
  fill: #7cb5ec;
  stroke: #7cb5ec;
}

You can see them in the highcharts.css available via CDN: https://code.highcharts.com/css/highcharts.css

So in your stylesheet you can override these colors with your own, after loading the highcharts.css file.

The colors are also applied to the legend labels.

Update: Here's a working example - I set the first 3 pie slice colors to red, blue, and green (I copied most of the example from here and then added the colors).

Upvotes: 0

Kawinesh S K
Kawinesh S K

Reputation: 3220

Via CSS use

path:nth-of-type(2){
      fill: rgb(0, 0, 0) !important;
  stroke: rgb(255, 255, 255);
  stroke-width: 1px;
  stroke-linejoin: round;
}

For other pie colors the 2 to rest of the values.

Via JS use

colors : ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', 
   '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'],

Inside highcharts initialization as a json obeject.

DEMO

Upvotes: 1

Related Questions