[Chartjs]-Chart.js move x axis labels to the right

by

1👍

✅

You can add a second x-axis of type: 'linear' as follows.

{
  type: 'linear',
  ticks: {
    min: 0,
    max: labels.length,
    stepSize: 1,
    callback: (v, i) => i == 0 ? '' : labels[i - 1]
  }
}

Note that I use a ticks callback method in order to provide the desired tick label at given index.

Then you should also hide the grid lines and ticks of the default x-axis.

{
  gridLines: {
    display: false
  },
  ticks: {
    display: false
  }
}

Please take a look at below runnable sample code and see how it works.

const labels = ['4.80', '9.60', '14.40', '19.20', '24.00', '28.80'];

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
      label: "My Dataset",
      data: [4, 8, 5, 7, 2, 4],
      backgroundColor: 'orange',
      categoryPercentage: 1,
      barPercentage: 1
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
          gridLines: {
            display: false
          },
          ticks: {
            display: false
          }
        },
        {
          type: 'linear',
          ticks: {
            min: 0,
            max: labels.length,
            stepSize: 1,
            callback: (v, i) => i == 0 ? '' : labels[i - 1]
          }
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<canvas id="myChart" height="90"></canvas>

-2👍

you can use this to put the tooltips to the right. Possibilities are top, left, right and bottom

options: {
        title: {
            display: true,
            position: 'right'
        }
}

Leave a comment