This section describes how to change the fills and borders of chart elements.
In the above example:
- A border is drawn around the series area with a corner radius and no padding.
- A border, fill and corner radius are applied to the Legend, with padding between the border and items provided as a single number.
- A border, fill and corner radius are applied to the series labels and axis labels with padding defined for each of the top, right, bottom and left.
- An item styler is used to override the styling of series labels for names starting with the letter 'D' and 'E'.
Fills Copy Link
{
label: {
color: '#333', //font colour
fill: '#badaff', // fill colour
fillOpacity: 0.8,
},
}
See Series Fills for details of the available fills types, including patterns and gradients.
Borders Copy Link
{
border: {
enabled: true,
stroke: '#2c79d5',
strokeWidth: 1,
},
}
Padding Copy Link
Padding can be defined as a single number to be applied to all sides of the element, or as an object with values for top, right, bottom and left.
{
padding: 4, //padding of 4px on all sides
}
{
padding: {
top: 4,
right: 6,
bottom: 2,
left: 6,
},
}
Item Styler Copy Link
Individual axis and series labels can be customised using a Styler callback.
itemStyler: (params) => {
if (params.datum.name.startsWith('D')) {
return {
/* ... */
fill: {
type: 'gradient',
rotation: 90,
colorStops: [{ color: '#c56600', stop: 0 }, { color: '#fb9323' }],
},
};
}
}