chartjs / chartjs/Chart.js

Point style cannot be changed in afterEvent callback.

Open
#11,712 0 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 writing a plugin for line charts, that should highlight both lines and points of a dataset on hover, we do the following:

```
id: 'highlightDatasets',
defaults: {
events: ['mousemove', 'mouseout'],
},
afterEvent(
chart: ProcessChart,
args: { event: ChartEvent; changed?: boolean; replay: boolean },
): void {
const items: InteractionItem[] = itemsAtEvent(chart, args.event);

switch (args.event.type) {
case 'mousemove':
case 'mouseout':
handleHoverEvent(items, chart);
}
}
```

Somewhere later in the code, we determine which datasets should be freyed out (not hovered) and which should be emphasized. Then we apply styles like that:

```
chart.getDatasetMeta(datasetIndex).dataset.options['borderWidth'] = width;
chart.getDatasetMeta(datasetIndex).dataset.options['borderColor'] = color;
chart.getDatasetMeta(datasetIndex).dataset.options['backgroundColor'] = color;
```

`width` and `color` are determined by whether it should be greyed out / highlighted.

With this code, I expect both dataset lines as well as points to be styled accordingly.

### Current behavior

Now this code works very well without even an additional chart update for the lines. However, the point style remains unchanged and remains the way it is upon chart config generation.

As you can see in the provided example, only the line changes, not the point color:

![image](https://github.com/chartjs/Chart.js/assets/4849728/4eabb2a7-d617-4db2-9c85-b7eedfd518b7)

We can do some seemingly hacky things like

```
chart.getDatasetMeta(datasetIndex)['_dataset']['backgroundColor'] = color;
```

with an additional update but this should not be working like that.

### Reproducible sample

https://codepen.io/leelenaleee/pen/WNyJXEe

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

_No response_

### chart.js version

4.4.1

### Browser name and version

Chrome 121.0.6167.139

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