score:1

Accepted answer

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>

score:-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'
        }
}

Related Query