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.
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
},