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>
1.4 KiB
1.4 KiB
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:
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:
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:
let chart = new Chart(ctx, {
type: 'radar',
data: data,
options: {
scales: {
r: {
ticks: {
backdropPadding: {
x: 10,
y: 4
}
}
}
}
});