[Chartjs]-How to change tooltip direction in Chart.js (2.9.4)?

1👍

You can set yAlign: 'bottom' in tooltip options, see the JSFiddle here

enter image description here


Relevant part of the code:

var myChart = new Chart('my-chart', {
  type: 'bar',
  data: { datasets: datasets },
  options: {
    hover: {
      mode: 'dataset',  
      animationDuration: 0
    },
    tooltips: {
      mode: 'nearest',
      yAlign: 'bottom' //use this to control the placement of the tooltip relative to its point
    },
    scales: {
      xAxes: [{
        stacked: true,
        type: 'time',
        time: {
          unit: 'day',
        },
        offset: true,
        ticks: { source: 'data' }
      }],
      yAxes: [{
        stacked: true,
        ticks: {
          min: 0,
          max: 1.0
        }
      }]
    }
  }
});

It isn’t mentioned in the official documentation, but works for Chart.js 2.9.4
(you can have a look at the source code where that option is used to override the automatic alignment calculation based on tooltip and chart size)

Leave a comment