How to add padding to the vertical scale (X-axis) in Chart.js?

Question

According to the "Tick Configuration" of Chart.js version 2.3 it is only possible to set a padding for the ticks on the Y-axis ("horizontal scale"):

padding | Number |10 | Padding between the tick label and the axis. Note: Only applicable to horizontal scales.

And this works like a charm:

scales: {
    yAxes: [{
        ticks: {
            padding: 20,
        }
    }],
    xAxes: [{
        ticks: {
             // how to set padding here?
        }
    }]
}

But the draft says, that I need some padding on the X-axis as well

How can I achieve this using Chart.js?

Maybe it's possible using a plugin?

Were you able to get a solution for this? I'm in the same boat :-) — Jesse Schutt, Mar 03 '17 at 15:51
how did you accomplish the space between tick 1 and 2? @lampshade — Alejandro Camba, Nov 12 '17 at 20:34
@lampshade `off-topic` comment, but can you share your chart JS conf because I am trying to create the same chart. — Rohit Nishad, Jun 28 '21 at 11:48

score 11 · Answer 1 · answered Jan 17 '19 at 19:39

11

Late to the game here, but the solution with latest Chart.js is to include this in your options parameter:

{
  scales: {
    xAxes: [
      {
        ticks: {
          padding: 20
        }
      }
    ]
  }
}

answered Jan 17 '19 at 19:39

rpearce

1,720
1
21
29

score 2 · Answer 2 · answered May 25 '17 at 13:48

2

Pass value to 'tickMarkLength' in options--> scales--> xAxes--> gridLines

xAxes: [{
  gridLines: {
   tickMarkLength: 10
},

answered May 25 '17 at 13:48

ritz

4,747
2
15
13

score 1 · Answer 3 · answered May 14 '19 at 18:44

1

The correct answer is the following for version 2.8:

options: {
    scales: {
        xAxes: [{
            ticks: {
                padding: 100
            }
        }], 
    }
}

answered May 14 '19 at 18:44

Alberto Crespo

2,429
5
28
51

TonyMark · Answer 4 · 2022-11-30T21:31:01.670

1

Add this to your options parameter:

options: {
   scales: {
       x: {
        ticks: {
           padding: 10
        }
    }
 }

edited Nov 30 '22 at 21:31

answered Nov 30 '22 at 21:30

TonyMark

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 03 '22 at 17:19

score 0 · Answer 5 · answered Aug 03 '23 at 14:21

0

For echarts version 5:

grid: {
    left: '3%',
    right: '10%',
    bottom: '3%',
    containLabel: true
  },

answered Aug 03 '23 at 14:21

Giovani

2,459
1
21
16

How to add padding to the vertical scale (X-axis) in Chart.js?

5 Answers5