React ChartsStylers

Stylers allow customisation of the visual appearance of specific items or series based on the data or other conditions.

Item Stylers Copy Link

An itemStyler is a callback function that is called once for each item within the series, and returns style properties for that item.

To change the style of an entire series based on some condition, use a Series Styler.

In this example:

• If the values in the 'Coal' line series are higher than the 'Nuclear' series, the markers and labels are larger and marked in red.
• The 'Imported' series bar for 'Jul' is red with a lime highlight style.
• The y-axis labels are coloured with a gradient scale.

series: [
    {
        type: 'line',
        //...
        marker: {
                itemStyler: ({ datum: { coal, nuclear }, fill, size }) => {
                    return coal > nuclear ? { fill: '#f44', size: 15 } : { fill, size };
                },
            },
            label: {
                itemStyler: ({ datum: { coal, nuclear } }) => {
                    if (coal > nuclear) {
                        return { fontSize: 12, border: { stroke: '#f44' }, padding: 2 };
                    } else return { fontSize: 8 };
                },
            },
    },
    {
        type: 'bar',
        //...
        itemStyler: ({ datum, fill, highlighted }) => {
                return {
                    fill: datum.month === 'Jul' ? (highlighted ? 'lime' : '#f44') : fill,
                };
            },
            label: {
                itemStyler: ({ datum: { month } }) => {
                    return { color: month !== 'Jul' ? 'transparent' : undefined };
                },
            },
        },
],
axes: [
    {
    //...
        label: {
            itemStyler: (params) => {
                return { color: lerpColor(params.value, '#00b347', '#cc2900') };
            },
        },
    },
]

Usage Copy Link

Item Stylers can be found:

• In the series object, for customising primitive properties on the series level.
• Inside nested series property objects, such as marker.
• Inside series and axes label objects.

Each itemStyler receives a params object containing:

• Relevant details of the item, such as the datum, seriesId, and _Keys.
• The style properties currently applied to the item.
• The highlight state of the item.

It should return an object containing the styles to be applied to the item.

The exact details differ between the different series types and components which implement the itemStyler function.

Please use the Options Reference to learn more about Item Stylers, the inputs they receive and the attributes that can be customised.

Series Stylers Copy Link

A styler is a callback function that is called once for each series and returns style properties. These are most often used within Theme Overrides.

In this example:

• Any series containing 'benchmark' in its key is coloured gray, and the other series are blue.
• The legend items also reflect this styling.

theme: {
    overrides: {
        bar: {
            series: {
                styler: (params) => {
                    if (params.yKey.includes('benchmark')) {
                        return { fill: 'lightgray' };
                    }
                    else return {fill: '#5090DC'}
                },
                },
            },
        line: {
            series: {
                styler: (params) => {
                    if (params.yKey.includes('benchmark')) {
                        return { stroke: 'lightgray' };
                    }
                    else return {stroke: '#5090DC'}
                },
                },
            },
    },
},

Usage Copy Link

The series level styler is called before the more specific itemStyler, with the results of the styler being passed into the itemStyler params.

Each styler receives a params object containing:

• Relevant details of the series, such as the seriesId, and _Keys.
• The style properties currently applied to the series.
• The highlight state of the series.

It should return an object containing the styles to be applied to the series. Styling of nested property objects other than marker must be done with an itemStyler.

The exact details differ between the different series types. Please use the Options Reference to learn more about Stylers, the inputs they receive and the attributes that can be customised.