Adding a Custom Chart Color Palette

GravityCharts already comes with 26 color palettes available for you to choose from:

Screenshot showing existing color palettes

If none of these palettes match your site design, you can add your own using a code snippet:

Important: Colors must be defined in either HEX (e.g., #FF0000 ) or RGB (e.g., rgb(255, 0, 0) ) format. Named colors like 'blue' , 'red' , etc., are not supported.

add_filter('gk/gravitycharts/color-palettes', function ($palettes) {
    $palettes['custom_palette'] = [
        'label'           => 'Custom Palette',
        'borderColor'     => [
            '#0000FF', // blue
            '#FFFF00', // yellow
            '#00FFFF', // aqua
            '#FF0000', // red
            '#FFA500', // orange
            '#008000', // green
            '#000000', // black
        ],
        'backgroundColor' => [
            '#0000FF', // blue
            '#FFFF00', // yellow
            '#00FFFF', // aqua
            '#FF0000', // red
            '#FFA500', // orange
            '#008000', // green
            '#000000', // black
        ],
    ];

    return $palettes;
});

You can add more colors or remove some depending on the number of options in your field.

Once added, your new palette will appear in the Chart Feed settings:

Screenshot of the new color palette inside the Chart configuration feed

Learn here how to add this code snippet to your website: Where to put code samples