CODEWITHSUNDEEP
csschartshighcharts
Fatih Taskent
Fatih Taskent

Reputation: 199

Highcharts pie wrong legend colors

[![enter image description here][1]][1]

The Slice color and the Legend color of the Pie-Chart do not match when the color is set using className. Doing this for (some) other charts works.

As you can see in the following code snippet, the pie slice and the Legend color for Chrome do not match.

// Build the chart
Highcharts.chart('container-donut', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        pie: {
            cursor: 'pointer',
            showInLegend: true,
        }
    },
    series: [{
        name: 'browsers',
        data: [
            { 
            	name: 'Chrome', 
            	y: 60 ,
              className: 'MyCustomColor'
            },
            { name: 'Internet Explorer', y: 5 },
            { name: 'Firefox', y: 5 },
            { name: 'Edge', y: 5 },
            { name: 'Safari', y: 5 },
            { name: 'Other', y: 5 }
        ]
    }]
});
.MyCustomColor {
  fill: green;
}
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>



<div id="container-donut" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>


<div id="container-column" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Upvotes: 1

Views: 938

Answers (1)

Eugene Brown
Eugene Brown

Reputation: 4352

Your css is not accessing the legend element, which is a <rect> inside of the <g class="MyCustomColor">

Changing your css to this should solve your issue:

.MyCustomColor, .MyCustomColor rect {
  fill: green;
}

Upvotes: 1

Related Questions