Non-focused dataset state
- Dominant language
- JavaScript
- Stars
- 67.7k
- Forks
- 11.9k
- Avg merge
- 7h 39m
- Merged PRs (30d)
- 5
Description
### Feature Proposal
It would be nice if hover dataset mode could support an "unfocused" state for the non-hovered items (rather than just a "hovered" state for the hovered one). In particular, it's much easier to dim every other dataset than to somehow draw extra attention to the hovered one. See the example screenshot below.

It would also be nice if this could work in conjunction with hover.mode="index". In my case, I'd like to highlight the data points for the hovered index, and also dim out other datasets. Currently, using mode="dataset" will cause every point to be hovered. But using mode="index" allows *no* customization of the hovered dataset (only point).
### Possible Implementation
I hacked together a plugin which uses getElementsAtEventForMode to find the active dataset, and modifies the background / border colors to dim out non-focused ones. However, it's hard to make this generic (supporting arrays, functions, values for borderColor/ backgroundColor, etc.). It also feels very hacky. I store the original background color, but I don't think it would work well if they change the color of the datasets themselves.
Essentially in afterEvent, I do something like this:
```
const items = chart.getElementsAtEventForMode(
args.event.native,
'dataset',
{ intersect: true },
true,
);
let hoveredIndex = -1;
if (items.length > 0) {
hoveredIndex = items[0].datasetIndex;
}
if (hoveredIndex !== this.hoveredIndex) {
console.log('Change to ', hoveredIndex);
this.hoveredIndex = hoveredIndex;
let idx = 0;
for (const dataset of chart.data.datasets) {
if (dataset._backgroundColor == null) {
dataset._backgroundColor = dataset.backgroundColor;
dataset._borderColor = dataset.borderColor;
}
if (idx === hoveredIndex || hoveredIndex === -1) {
dataset.backgroundColor = dataset._backgroundColor;
dataset.borderColor = dataset._borderColor;
} else {
if (dataset._backgroundColor != null) {
if (Array.isArray(dataset._backgroundColor)) {
dataset.backgroundColor = dataset._backgroundColor.map(
(c) => alpha(c, 0.2),
);
} else {
dataset.backgroundColor = alpha(
dataset._backgroundColor,
0.2,
);
}
}
if (dataset._borderColor != null) {
if (Array.isArray(dataset._borderColor)) {
dataset.borderColor = dataset._borderColor.map((c) =>
alpha(c, 0.2),
);
} else {
dataset.borderColor = alpha(dataset._borderColor, 0.2);
}
}
}
idx++;
}
args.changed = true;
this.chart.update();
this.chart.draw();
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.