Highcharts change color of Pie slices

Question

Update:

I was able to get the percentage to show and also a legend. But still not able to change colors.

chart: {
        type: 'pie',
        styledMode: true
    },
    tooltip: {
         pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    theme: {
          colors: [
                    'green',
                    'red',
                    'fushcia'
                  ]
    },
    plotOptions: {
        pie: {
          colors: [
                    'green',
                    'red',
                    'fushcia'
                  ],
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels:  {
                     enabled: false
                     },
                   showInLegend: true
           }

    },
    title: {
        text: 'Rundeck Jobs Stats'
    },
    series: [
        {
            data: chartData(table)
        }

Original Post :

I have a Pie chart generated from a HTML table with DataTables. I am looking at one column, STATUS, that shows either succeeded, failed or aborted. The chart is counting the number of occurrences of each and draws a Pie.

I would like the pie chart to be green for the successes, red for the failures and fushcia for the aborted.

I also would like the slices to show their respective percentages of the pie.

this is the code I have for creating the chart, it is taken directly from the example at https://datatables.net/examples/api/highcharts.html

    // Create DataTable
const table = new DataTable('#example');
 
// Create chart
const chart = Highcharts.chart('demo-output', {
    chart: {
        type: 'pie',
        styledMode: true
    },
    title: {
        text: 'Rundeck Jobs Stats'
    },
    series: [
        {
            data: chartData(table)
        }
    ]
});
 
// On each draw, update the data in the chart
table.on('draw', function () {
    chart.series[0].setData(chartData(table));
});
 
function chartData(table) {
    var counts = {};
 
    // Count the number of entries for each position
    table
        .column(3, { search: 'applied' })
        .data()
        .each(function (val) {
            if (counts[val]) {
                counts[val] += 1;
            }
            else {
                counts[val] = 1;
            }
        });
 
    return Object.entries(counts).map((e) => ({
        name: e[0],
        y: e[1]
    }));
}

I've looked at a number of posts and tried to add colors to the series but no joy as of yet.

thanks in advance

R

Answer 1

That's because you are using styledMode:

styledMode: boolean

Whether to apply styled mode. When in styled mode, no presentational attributes or CSS are applied to the chart SVG. Instead, CSS rules are required to style the chart. The default style sheet is available from https://code.highcharts.com/css/highcharts.css.

You can disable it as below or style your chart in CSS.

chart: {
  ...,
  styledMode: false
}

---

Live example: https://jsfiddle.net/BlackLabel/hm5nb2o4/

API Reference: https://api.highcharts.com/highcharts/chart.styledMode

Docs: https://www.highcharts.com/docs/chart-design-and-style/style-by-css