Customize Pie Chart Colors (ApexCharts)

To customize the colours of a pie chart rendered with ApexCharts in wpDataTables, you can utilize the wpDataChartsCallbacks function to define your own colour palette. Here's how you can achieve this:

1. Identify Your Chart ID: Each chart in wpDataTables is assigned a unique ID. For instance, if your chart's ID is 40, you will reference it as wpDataChartsCallbacks[40].

2. Define the Color Palette: Create an array of colour codes that you wish to apply to your pie chart segments. Ensure that the number of colours matches or exceeds the number of segments in your chart.

3. Implement the Callback Function: Use the wpDataChartsCallbacks function to apply your custom colour array to the chart's options.

Example Implementation:

<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function() {
    jQuery(window).on('load', function() {
      if (typeof wpDataChartsCallbacks == 'undefined') {
        wpDataChartsCallbacks = {};
      }
      wpDataChartsCallbacks[40] = function(obj) {
        obj.options.colors = [
          '#2E93fA', '#66DA26', '#546E7A', '#E91E63', '#FF9800',
          '#FFF800', '#570A57', '#000', '#FFE3A9', '#FFC3C3',
          '#FF5D5D'
        ];
      };
    });
  });
</script>

In this script:

• The wpDataChartsCallbacks[40] function targets the chart with ID 40.

• The obj.options.colors array specifies the custom colours for the pie chart segments.

• Adjust the colour codes in the array to suit your design preferences.

Implementation Steps:

1. Place the above script on the same page where your pie chart is displayed.

2. Ensure that the chart ID (in this case, 40) corresponds to your specific chart.

3. Customize the colour codes in the array to match your desired colour scheme.

For more detailed information, refer to the wpDataTables ‘Developer’s Handbook’ documentation section on changing colours in ApexCharts:

Change color on ApexChart pie chart

Please note that using hooks or wpDataTable and wpDataChart callbacks requires a certain level of programming skills and included support refers only to advice.