sectioni
Posts: 47
Joined: Thu Dec 31, 2015 2:17 pm

Setting dataLabel color to contrast + legend color issues

Hi,

I'm using Highcharts 5.0.7
I have a pie, that has dataLabels that for some reason are all blue (#003399).
And it doesn't look good on all pie slices.

This is my code:

Code: Select all

plotOptions: {
                    pie: {
                        allowPointSelect: true,    
                        showInLegend: true,
                        cursor: 'pointer',
                        depth: 35,
                        dataLabels: {
                            distance: -25,
                            enabled: true,
                            style: {
                                'fontSize': '12px',
                                'fontFamily': 'Arial',
                                'textOutline': 'none',
                                'color': 'contrast'
                            },
                            useHTML: false,
                            formatter: function () {
                                return this.y;
                            }
                        }
                    },
Any idea?

Also, I am setting each series datapoint's color using 'className' in the series data array.
But the legend doesn't use these classes. And i don't know why...
sectioni
Posts: 47
Joined: Thu Dec 31, 2015 2:17 pm

Re: Setting dataLabel color to contrast + legend color issue

Found the answer to my first question.
It's because i use drilldown in my datapoints.
In this case I need to style the dataLabels with:

Code: Select all

        drilldown: {
            activeDataLabelStyle: {
                color:'contrast'
            }
        }
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Setting dataLabel color to contrast + legend color issue

Hi sectioni,

Have you tried to set color inside data? This way Highcharts set the same color for values in legend. Check the example below:

https://jsfiddle.net/Bastsss/21oq3ru4/
API:https://api.highcharts.com/highcharts/s ... data.color

Best regards!
Sebastian Wędzel,
Highcharts Developer
sectioni
Posts: 47
Joined: Thu Dec 31, 2015 2:17 pm

Re: Setting dataLabel color to contrast + legend color issue

If I set the 'color', then it's ok.
But I wanna use 'className' instead.
Because these are colors used throughout the site for other things. And I prefer not to duplicate color values if i don't have to.

I think it's probably a bug in Highcharts 5
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Setting dataLabel color to contrast + legend color issue

sectioni,

Aaaa ok, I've got it. So add rect property in your css, just like in the example below and everything should be fine. Css get access to legend by <rect> which is inside of the <g class="MyCustomColor">

https://jsfiddle.net/Bastsss/tuyr9a13/

Best regards!
Sebastian Wędzel,
Highcharts Developer
sectioni
Posts: 47
Joined: Thu Dec 31, 2015 2:17 pm

Re: Setting dataLabel color to contrast + legend color issue

It's working!

Thanks

Return to “Highcharts Usage”