chartjs / chartjs/Chart.js

In line chart when `interaction` mode is `dataset`, fade animation is missing when legend item is clicked

Open
#10,882 2 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

In a line chart, when legend item is clicked, respective line should fade in/out.

### Current behavior

In a specific scenario (mentioned in below section), when legend item is clicked, respective line does not fade but suddenly disappears. This happens when interaction mode is set to `dataset` with intersect set to `false`.

### Reproducible sample

https://codepen.io/pratheekbhandary/pen/LYrjwGy

### Optional extra steps/info to reproduce

### Steps to reproduce
- For a line chart, set below `options`.
```js
const options = options: {
interaction: {
mode: "dataset",
intersect: false,
},
}
```
- Hover over the graph so that the tooltip is visible.
- Now try hiding the line for which the tooltip is shown.
- Instead of fading away it abruptly go off the screen.
- It can also be seen that if tooltip is not active, then the line fades away normally.

Even disabling the tooltip does not seem to add fade animation.
Please check the attached video recording attached.
https://user-images.githubusercontent.com/30550942/202433430-1d104575-1a0e-4a78-b1b2-d49e8f71c89a.mov

### Possible solution

_No response_

### Context

Below `interaction` setting was used to achieve drill-down mechanism in line chart i.e. when user clicks on/near the line `data` will be switched to show another line chart.

### chart.js version

v3.8.0 (also reproduced in 4.0.1)

### Browser name and version

Chrome v107.0.5304.110

### 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.