Highlight wrong index when use multi dataset for each column

SMAH1 commented 2 years ago

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.

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