[Chartjs]-ChartJS xAxis label position

by

3👍

✅

Chart.js implements a padding property in the ticks object for this:

Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.

Here’s a working example with the x-axis labels offset 20px down from the line:

new Chart(document.getElementById("chart"), {
  type: "bar",
  data: {
    labels: ["Blue", "Red", "Green", "Orange", "Purple"],
    datasets: [{
      data: [0, 1, 2, 3, 4]
    }]
  },
  options: {
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        ticks: {
          padding: 20
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div style="height:200px;width:200px">
  <canvas id="chart"></canvas>
</div>

Leave a comment