Point style cannot be changed in afterEvent callback.

[jwedel]

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:

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