Vue ChartsStylers

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

Item Stylers

An itemStyler is a callback function that is called once for each item within the series. These can be found:

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

Each itemStyler receives a params object containing the datum of the item, as well as the current styles applied to it. 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.

series: [
    {
        type: 'line',
        xKey: 'month',
        yKey: 'coal',
        yName: 'Coal',
        marker: {
            itemStyler: (params) => {
                if (params.datum.coal > params.datum.nuclear) return { fill: 'red', size: 15 };
                else return { fill: p.fill, size: p.size };
            },
        },
    },
    {
        type: 'bar',
        xKey: 'month',
        yKey: 'imported',
        yName: 'Imported',
        itemStyler: ({ datum, xKey, fill, highlighted }) => {
            return {
                fill: datum[xKey] === 'Jul' ? (highlighted ? 'lime' : 'red') : fill,
            };
        },
    },
];

In this configuration:

• The markers in the 'Coal' series will be larger and red if they are higher than 'Nuclear' series for the same month.
• The 'Imported' series bar for 'Jul' will be red with a lime highlight style.

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