CODEWITHSUNDEEP
javascriptchartschart.js
Joe
Joe

Reputation: 519

Chart.js add padding to scales

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: https://i.sstatic.net/wndPx.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?

Upvotes: 18

Views: 54922

Answers (1)

Tom Glover
Tom Glover

Reputation: 3026

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/

Upvotes: 61

Related Questions