chartjs / chartjs/Chart.js

Using object as data source with multiple data sets breaks tool tips and click events if keys don't match and line up.

Open
#11,286 8 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### Expected behavior

When using multiple data sets if the keys of each object used for the data aren't the same or have a different insertion order the tool tip functionality and data index returned from getElementsAtEventForMode when used in the on click event should return the correct index and should show the correct tool tip data at the correct location.

### Current behavior

When hovering over a data point the tool tip will not line up correctly or contain the correct data for all data points in the data sets added after the first data set.

### Reproducible sample

https://codepen.io/mike-mns/pen/bGmKKZm ----- https://codepen.io/mike-mns/pen/LYgrpPj

### Optional extra steps/info to reproduce

Line Chart Example
https://codepen.io/mike-mns/pen/bGmKKZm

Bar Chart Example
https://codepen.io/mike-mns/pen/LYgrpPj

### Possible solution

I have a workaround but it is only viable for the bar charts as the issue does not cause the chart to look incorrect like it does with line charts. I have included the workaround in both code pens. The code pens contain multiple variations of the issue.

### Context

I am trying to reliably display the chart data in line and bar charts from an objects data and be able to have accurate tool tips and when clicking on data be able to collect the label and data value at the click location.

### chart.js version

v4.3.0

### Browser name and version

Chrome Version 112.0.5615.49 (Official Build) (64-bit)

### Link to your project

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.