chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
63.94k stars 11.89k forks source link

Bug with tooltip for stacked horizontal bar chart #11646

Open zamaldev opened 5 months ago

zamaldev commented 5 months ago

Expected behavior

Proper tooltip shown on bar is hovered.

Current behavior

Seems like areas for tooltips are shifted when bar chart is stacked. Probably its because of data.datasets[].stack property. The bars are stacked, but tooltip areas act like there is no stack property.

Reproducible sample

https://jsfiddle.net/ovagrc80/

Optional extra steps/info to reproduce

Just try to slide cursor over bars, and see which tooltip is shown

Possible solution

No response

Context

I have a statistics, what I need to show as a horizontal bar chart. Basically all I need is in sample, but that bug with tooltip confuse me.

Expected chart:

A:5; B:9; C: 10
AAAAABBBBC

chart.js version

v4.4.1

Browser name and version

No response

Link to your project

No response

MartinNievas commented 5 months ago

I had the same problem, a possible workaround is set the option:

    interaction: {
        intersect: true,
        mode: "dataset",
    },

On the example you provide:

  options: {
    indexAxis: "y",
    interaction: {
        intersect: true,
        mode: "dataset",
    },
    maintainAspectRatio: false,
    scales: {
      x: {
        stacked: false,
      }
    }
  }