---
title: "Customize Pie Chart Colors (ApexCharts)"
description: "A custom chart callback example of how you can modify the ApexChart pie colors"
url: https://help.wpdatatables.com/en/articles/11-customize-pie-chart-colors-apexcharts
collection: "Charts"
updated: 2025-12-09
language: en
---

# Customize Pie Chart Colors (ApexCharts)

A custom chart callback example of how you can modify the ApexChart pie colors

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**:

```javascript
<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](https://wpdatatables.com/developers/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.