score:1

Accepted answer

you can set the intersect property to false to always get the tooltip without needing to intersect the bar exactly:

var options = {
  type: 'bar',
  data: {
    labels: ["red", "blue", "yellow", "green", "purple", "orange"],
    datasets: [{
      label: '# of votes',
      data: [12, 19, 3, 5, 2, 3],
      borderwidth: 1
    }]
  },
  options: {
    plugins: {
      tooltip: {
        intersect: false
      }
    }
  }
}

var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
  <canvas id="chartjscontainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.0/chart.js"></script>
</body>

score:0

you can make your own tooltip by editing the callbacks, i had to get the nearest values around my cursor, from all datasets, on my line chart. this works for me on chartjs 2.9.3:

tooltips: {
    mode: "x",
    position: "nearest",
    intersect: false,
    callbacks: {
        beforebody: function(tooltipitems, alldata) {
            let x = tooltipitems[0].x; // get x coordinate

            let datasets = alldata.datasets; // datasets
    
            let values = [];
            for (i in datasets) {
                let dataset = datasets[i]; 

                let meta = this._chart.getdatasetmeta(i); // dataset metadata
                let xscale = this._chart.scales[meta.xaxisid]; // dataset's x axis
                let xvalue = xscale.getvalueforpixel(x); // we get the x value on the x axis with x coordinate

                let data = dataset.data // data

                // search data for the first value with a bigger x value
                let index = data.findindex(function(o) { 
                    return o.x >= xvalue; 
                });

                let value = data[index]; // this is our nearest value

                // format label
                if (isnan(value.ymax)) {
                    values.push(`${dataset.label}: ${value.y}\n`);
                } else {
                    values.push(`${dataset.label}: ${value.y}, min: ${value.ymin}, max: ${value.ymax}\n`)
                }
            }

            return values.join(""); // return label
        },

        label: function() { // this needs to be empty

        },
    }
},

Related Query

More Query from same tag