CODEWITHSUNDEEP
javascriptcsscanvaswebcharts
Arthur Kishinets
Arthur Kishinets

Reputation: 147

How to remove padding Chart js

I use Chart js with options:

  options: {
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          beginAtZero: true,
          min: 0,
          beginAtZero: true,
        },
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          min: 0,
          beginAtZero: true,
        },
      }]
    }
  }

How to remove this padding? I cant find this option in documentation.

enter image description here

Upvotes: 0

Views: 1818

Answers (2)

Dekel
Dekel

Reputation: 62666

You can use the minRotation or maxRotation of tick to change the angel of the labels:

options: {
  scales: {
    xAxes: [{
      ticks: {
        minRotation: 90 // angle in degrees
      }
    }]
  }
}

Upvotes: 2

Aslam
Aslam

Reputation: 9690

The padding is due to the first label. If you reduce the labels, everything will work just fine. Because the canvas element has to fill in the space provided and cannot go beyond the canvas size.

Upvotes: 1

Related Questions