chartjs / chartjs/Chart.js

Highlight wrong index when use multi dataset for each column

Open
#10,743 5 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

Chart.js version : 3.9.1
Angular: 13
Note : Not use 'ng2-charts'

I use chartjs for draw chart with two y-Axises (purity, pressure) and four columns (purity record/event, pressure record/event).
For record use line chart and for event use bubble in chart.

Highlight item is hover.

```typescript
....
scales: {
x: {
type: "linear",
},
y_purity: {
type: 'linear',
display: true,
position: 'left',
suggestedMin: 20,
suggestedMax: 100,
title: {
display: true,
align: 'center',
text: 'Purity',
color: this.myred,
padding: 0,
font: {
weight: 'bold'
}
},
grid: {
drawOnChartArea: false
}
},
y_pressure: {
type: 'linear',
display: true,
position: 'right',
id: 'y-pressure',
suggestedMin: 0,
suggestedMax: 8,
title: {
display: true,
align: 'center',
text: 'Pressure',
color: this.mygreen,
padding: 0,
font: {
weight: 'bold'
}
},
grid: {
drawOnChartArea: false
}
}
},

....

datasets: [{
label: 'Purity',
borderColor: this.myred,
backgroundColor: this.myred,
fill: false,
data: [],
yAxisID: 'y_purity',
}, {
label: 'Pressure',
borderColor: this.mygreen,
backgroundColor: this.mygreen,
fill: false,
data: [],
yAxisID: 'y_pressure'
}, {
label: 'Event Purity',
backgroundColor: '#fff',
borderColor: this.myred2,
borderWidth: 4,
radius: 7,
hoverBackgroundColor: '#fff',
hoverBorderColor: this.myred2,
hitRadius: 0,
hoverRadius: 0,
hoverBorderWidth: 4,
type: 'bubble',
data: [],
hidden: true,
yAxisID: 'y_purity'
}, {
label: 'Event Pressure',
backgroundColor: '#fff',
borderColor: this.mygreen2,
borderWidth: 4,
radius: 7,
hoverBackgroundColor: '#fff',
hoverBorderColor: this.mygreen2,
hitRadius: 0,
hoverRadius: 0,
hoverBorderWidth: 4,
type: 'bubble',
data: [],
hidden: true,
yAxisID: 'y_pressure'
}]

....

```

### Current behavior

When mouse hover _event_ that is drawn in middle of chart, highlight index first of record.
The same is added for the rest of the events (Second event, highlight second record).

![p2](https://user-images.githubusercontent.com/21136680/193743223-ffc90921-2ca8-49d8-8ab2-9a7a90cad704.png)

### Reproducible sample

angular 13 (Not use 'ng2-charts')

### Optional extra steps/info to reproduce

_No response_

### Possible solution

_No response_

### Context

_No response_

### chart.js version

3.9.1

### Browser name and version

_No response_

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