Multi Series Pie/Doughnut tooltips' titles all show first dataset's label

[jezmck]

Expected behavior

Each tooltip should show the relevant dataset's label.

Current behavior

The tooltips' titles all show the label from the first dataset.

NB: See also the official example at https://www.chartjs.org/docs/latest/samples/other-charts/multi-series-pie.html which demonstrates this behaviour.

Reproducible sample

https://codepen.io/jezmck/pen/wvVLYXP

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

No response

chart.js version

v4.4.6

Browser name and version

Chrome Latest

Link to your project

No response

[LeeLenaleee]

I don't think the current implementation is wrong. We show in the title what corresponds to the legend and then the label in the body itself. You can also always override the callbacks to get the behavior you want.

[jezmck]

Why does it show "Overall Yay" when hovering "Group A Yay"? 😕

[LeeLenaleee]

Because that example uses custom logic for the tooltip callbacks as I described and a custom onclick. That should indeed be fixed. But I was looking at your fiddle and that one shows the correct values

[jezmck]

What has 'a' got to do with the first value of the second ring?

[LeeLenaleee]

It is the label it is linked to and thus by default the legend. So when you click a on the legend that part of the ring will disapear

[jezmck]

For any who finds the issue, the "solution" is to pad the second and subsequent datasets' data arrays with nulls for each datum in the preceding datasets.

e.g.

// chart config where there are two rings, each with two values
{
  "data": {
    "labels": [
      "A",
      "B",
      "C",
      "D"
    ],
    "datasets": [
      {
        "data": [
          14.08, // A
          17.11, // B
          null,  // these are not required, but here for clarity
          null   // ^
        ]
      },
      {
        "data": [
          null, // pushing the data along to align with the labels
          null, // ^
          12.2, // C
          6.12  // D
        ]
      }
    ]
  }
}