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.
- A item styler to used to override the styling of 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 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' },
],
},
};
}
},