Chartjs-How to avoid positioning ChartJS's tooltip on specific datasets on a chart?

by

0👍

You have to use the custome positioner.

Here is an example on how to implement it:

// Define the custom position mode function
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
  var tooltipWidth = this._chart.tooltip._view.width;
  var chartArea = this._chart.chartArea;
  var xPosition = eventPosition.x;
  var yPosition = eventPosition.y;
  
  // Check if the hovered element belongs to the second dataset
  if (elements[0]._datasetIndex === 1) {
    // If yes, set the x position to be the center of the chart
    xPosition = chartArea.left + chartArea.width / 2;
  }
  
  return {
    x: xPosition - tooltipWidth / 2,
    y: yPosition
  };
};

var chartdata = {
 = {
  type: 'line',
  ...
  options: {
    tooltips: {
      position: 'custom'
    }
  }
};

You can find more help in ChartJS documentation

0👍

I think setting up plugins.tooltip.position to average is enough to avoid positioning the tooltip.

reference

Leave a comment