Highchart 3D Pie Chart Label color?

Question

I'm trying to use a dark background for my HighChart 3D Pie Chart. By default, the text is black with white glow.

My goal is to have something similar to: https://www.highcharts.com/demo/pie-gradient/dark-unica

I'm using the WordPress plugin wpdatatables to create the actual pie and was given the following support:

"You can check in our documentation about wpDataCharts callbacks. Every chart exposes a number of options that customize its look and feel. Charts usually support custom options appropriate to that visualization. This callbacks allows adding options that are available in Google Charts API, Highcharts API and Chart.js API"

https://wpdatatables.com/documentation/information-for-developers/wpdatacharts-callbacks/

I tried the following code based on support and HighChart website

jQuery(window).load(function() {
  if (typeof wpDataChartsCallbacks == 'undefined') {
    wpDataChartsCallbacks = {};
  }
  wpDataChartsCallbacks[14] = function(obj) {
    obj.options.plotOptions.series.dataLabels.color = '#FF0000';
    obj.options.chart.backgroundColor = '#GG0000';
    obj.options.chart.zoomType = 'x';
    obj.options.chart.panning = true;
    obj.options.chart.panKey = 'shift';
    obj.options.tooltip = {
      formatter: function() {
        var s = '<b>$' + this.y + '</b>';
        return s;
      }
    }
  }
});

I added that line:

obj.options.plotOptions.series.dataLabels.color = '#FF0000';

but doesn't seems to be working.

Any help would be appreciated. Thanks.

Just to confirm, what code did you use for your background color? In your code sample, you have '#GG0000', which is not a valid HTML color. — Mike Zavarello

Mike Zavarello Mike Zavarello · Accepted Answer · 2018-07-19T12:04:47

I've never used Wordpress callbacks as you are doing, but whenever I need to update a chart's options, I've found that you need to refer to the series as an array, even if you have only one in your chart.

Try this and see whether it works:

obj.options.plotOptions.series[0].dataLabels.color = '#FF0000';

Update: Please see the comment from @ppotaczek below for the correct syntax.

Highchart 3D Pie Chart Label color?

1 Answers