2021-03-30 16:32:39 +02:00
# Padding
2021-03-14 16:21:30 +01:00
2022-10-22 18:44:32 +02:00
Padding values in Chart options can be supplied in a couple of different formats.
2021-03-14 16:21:30 +01:00
2021-03-30 16:32:39 +02:00
## Number
2021-03-14 16:21:30 +01:00
If this value is a number, it is applied to all sides (left, top, right, bottom).
2021-04-02 18:13:43 +02:00
For example, defining a 20px padding to all sides of chart:
2021-03-14 16:21:30 +01:00
```javascript
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
2021-04-16 19:32:26 +02:00
layout: {
2021-03-14 16:21:30 +01:00
padding: 20
}
}
});
```
2021-03-30 16:32:39 +02:00
## {top, left, bottom, right} object
2021-03-14 16:21:30 +01:00
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` .
2022-10-22 18:44:32 +02:00
Let's say you wanted to add 50px of padding to the left side of the chart canvas, you would do:
2021-03-14 16:21:30 +01:00
```javascript
let chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
layout: {
padding: {
left: 50
}
}
}
});
```
2021-03-30 16:32:39 +02:00
## {x, y} object
2021-03-14 16:21:30 +01:00
2021-10-15 21:36:53 +02:00
This is a shorthand for defining left/right and top/bottom to the same values.
2021-03-14 16:21:30 +01:00
2021-10-15 21:36:53 +02:00
For example, 10px left / right and 4px top / bottom padding on a Radial Linear Axis [tick backdropPadding ](../axes/radial/linear.md#linear-radial-axis-specific-tick-options ):
2021-03-14 16:21:30 +01:00
```javascript
let chart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
scales: {
r: {
ticks: {
backdropPadding: {
x: 10,
y: 4
}
}
}
}
});
```