KamenMinkov
Posts: 4
Joined: Sun Dec 06, 2020 2:36 pm

Particular Segment in Particular Color in Pie Chart React

Hello, guys,

I need some help with coloring my chart. I would like to use a particular color for a particular data segment. In other words, if I have a chunk of data called "Win", I always want this to be "green". Reordering the data is not an option for me. I use styled mode. I went through some discussions here for similar issues, however I cannot find a complete solution.
For example:

Code: Select all

	{
		series: [{ data: [{ name: 'Win', y: 10, className: 'highcharts-color-2' }, { name: 'Loss', y: 5, className: 'highcharts-color-1' }] }]
	}
This works for the colors inside the chart, but the tooltip colors (shadows, borders, etc.) does not match.

I hope someone could help with this. I find it really hard to make such a simple thing works.

Thanks in advance.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Particular Segment in Particular Color in Pie Chart React

Hello Kamen,

You can use series.pie.data.color property to achieve this.

Demo: https://jsfiddle.net/BlackLabel/ko0j1qL9/
API: https://api.highcharts.com/highcharts/s ... data.color

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
KamenMinkov
Posts: 4
Joined: Sun Dec 06, 2020 2:36 pm

Re: Particular Segment in Particular Color in Pie Chart React

Hey, thanks. However, it is not working for me, the colors are not applying. I am using styled mode.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Particular Segment in Particular Color in Pie Chart React

Hi Kamen,

Unfortunately, it is not possible that way.

In this thread, at the bottom of the last message (viewtopic.php?t=44072#p166735), you have the answer to your question.

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”