Chartjs-Put tooltip on the middle of two bars

by

0👍

✅

You don’t specify if ‘middle’ means on the x- and/or y-axis. But since you wrote:

…on the middle of two bars…

I assume you mean on the x-axis. In this case you need to set the options.tooltips.mode property to index. Below is a working example.

let myChart = new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['x', 'y', 'z'],
    datasets: [{
      label: '1993',
      data: [50, 30, 65],
      backgroundColor: '#503291'
    }, {
      label: '1994',
      data: [60, 15, 65],
      backgroundColor: '#1bbecd'
    }]
  },
  options: {
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        barPercentage: 1
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>

For future questions please provide a MCVE as that makes it much quicker and easier to help you.

Leave a comment