I need to add padding on the x and y axis. This question (How to add padding between Graph and X/Y-Scale in chart.js?) is my exact situation, only I am using Chart.js 2.
See screeshot: http://i.imgur.com/2BvlZDg.png
Basically my points are large images, so they are running off the chart. Is there a way to add padding to the chart area or scales so they fit better?
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!
Set Canvas Padding For a line/area chart, canvas padding is the space between the canvas border and the position where the line/area chart begins.
Figured out a way to do it with the yAxes:
options: {
scales: {
yAxes: [{
ticks: {
padding: 100
}
}],
}
}
No solution so far on the x axis. A workaround to your problem though could be to set a lower min by calculating the min of the data and adding subtracting a increment value:
yAxes: [{
ticks: {
min: -100
}
}],
Both togheter would be something like this: https://jsfiddle.net/u9b0nmp8/1/
Update #1: X-axis suggestion
Update #2: improved alternative to the x-Axis based on https://stackoverflow.com/a/38620312/6638478
Update #3: version 2.7 and up now supports padding on both y and x axis. Example: https://jsfiddle.net/u9b0nmp8/207/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With