question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add dataset indexes to tooltipModel

See original GitHub issue

Feature Proposal

I think it would make sense to include an array of dataset indexes in the tooltipModel that is passed to any custom tooltip callback. The array should contain the index for each dataset that was included when calculating the position for the tooltip. Another way to phrase it is to say that the array should contain the index for each dataset that the tooltip belongs to.

Feature Use Case

Knowing which datasets the tooltip belongs to would make it possible to know what data to show in it if one e.g. uses the ‘nearest’ position option. For example, I have a custom tooltip (position: 'nearest') in which I want to show the current value it’s pointing to. In the tooltipModel, I just get a list of all the datasets that are relevant at the current index. By knowing which dataset the tooltip belongs to, I can easily pick out the right data from dataPoints. Currently, this is only possible by performing a (possibly faulty) comparison of caretY and dataPoints[...].y.

Possible Implementation

It looks like perhaps the positioners functions can easily be modified to return an array on top of the x and y coordinate, and then that array could easily be added to the model as something like “datasets”, “datasetIndexes”, or maybe “belongsTo”. If the change is this “simple”, I could try submitting a PR for it.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
godenjicommented, Jan 31, 2021

As of chart.js 3.0 you can get a single element array in a multi-dataset by setting tooltip mode to point.

tooltip: {
  enabled: true,
  mode: 'point',
  callbacks: {
    title: (xs: TooltipItem[]) => {
      // without mode: 'point' xs could consist of 1 or more elements
      return xs[0].dataset.label
    }
  }
}
0reactions
kurklecommented, Apr 24, 2021

Closing as resolved

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding a second custom tooltip for charts in ChartsJs
I am trying to add a second custom tooltip for a doughnut chart in ChartsJs. However, now that I added a new set...
Read more >
Chart.js — Chart Tooltips and Labels | by John Au-Yeung
We can make creating charts on a web page easy with Chart.js. ... index has the index of the data item in the...
Read more >
How to Extract the Data Index of a Dataset when ... - YouTube
How to Extract the Data Index of a Dataset when Hover on Tooltip in Chart JSExtracting the data index and the dataset index...
Read more >
Adding a second custom tooltip for charts in ChartsJs-Chart.js
Coding example for the question Adding a second custom tooltip for charts in ... var percent = Math.round((dataset['data'][tooltipItem['index']] ...
Read more >
ChartJS - Vertical line on points and custom tooltip - Misc
appendChild(tooltipEl); } // Hide if no tooltip if (tooltipModel.opacity === 0) ... classList.add('no-transform'); } function getBody(bodyItem) { return ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found