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?

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?

• javascript
• chart.js
• padding
• chart.js2

• Were you able to get a solution for this? I'm in the same boat :-) – Jesse Schutt Commented Mar 3, 2017 at 15:51
• @JesseSchutt Unfortunately not. – lampshade Commented Mar 29, 2017 at 12:53
• how did you accomplish the space between tick 1 and 2? @lampshade – Alejandro Camba Commented Nov 12, 2017 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 Commented Jun 28, 2021 at 11:48

5 Answers 5

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
        }
      }
    ]
  }
}

Add this to your options parameter:

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

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

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

The correct answer is the following for version 2.8:

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

For echarts version 5:

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