# Padding
Padding values in Chart options can be supplied in couple of different formats.
# Number
If this value is a number, it is applied to all sides (left, top, right, bottom).
For example, defining a 20px padding to all sides of chart:
let chart = new Chart(ctx, { type: 'line', data: data, options: { layout: { padding: 20 } } });
Copied!
# {top, left, bottom, right} object
If this value is an object, the left
property defines the left padding. Similarly the right
, top
and bottom
properties can also be specified.
Omitted properties default to 0
.
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do:
let chart = new Chart(ctx, { type: 'line', data: data, options: { layout: { padding: { left: 50 } } } });
Copied!
# {x, y} object
This is a shorthand for defining left/right and top/bottom to the same values.
For example, 10px left / right and 4px top / bottom padding on a Radial Linear Axis tick backdropPadding:
let chart = new Chart(ctx, { type: 'radar', data: data, options: { scales: { r: { ticks: { backdropPadding: { x: 10, y: 4 } } } } });
Copied!
← Options Performance →