mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
67 lines
1.4 KiB
Markdown
67 lines
1.4 KiB
Markdown
# 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 exmaple, defining a 20px padding to all sides of chart:
|
|
|
|
```javascript
|
|
let chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
layout:
|
|
padding: 20
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## {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:
|
|
|
|
```javascript
|
|
let chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: data,
|
|
options: {
|
|
layout: {
|
|
padding: {
|
|
left: 50
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## {x, y} object
|
|
|
|
This is a shorthand for defining left/right and top/bottom to same values.
|
|
|
|
For example, 10px left / right and 4px top / bottom padding on a Radial Linear Axis [tick backdropPadding](../axes/radial/linear#tick-configuration):
|
|
|
|
```javascript
|
|
let chart = new Chart(ctx, {
|
|
type: 'radar',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
r: {
|
|
ticks: {
|
|
backdropPadding: {
|
|
x: 10,
|
|
y: 4
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|