Highlight wrong index when use multi dataset for each column
- 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).

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