Chart.js icon indicating copy to clipboard operation
Chart.js copied to clipboard

Highlight wrong index when use multi dataset for each column

Open SMAH1 opened this issue 3 years ago • 5 comments

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

p2

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

SMAH1 avatar Oct 04 '22 05:10 SMAH1

@SMAH1 can I work on this issue? Please specify the file in which change is to be made.

harshit-dugar avatar Oct 04 '22 13:10 harshit-dugar

data not in orber by timestamp and parsing is off?

kurkle avatar Oct 04 '22 14:10 kurkle

Or just 'index' interaction mode

kurkle avatar Oct 04 '22 14:10 kurkle

I got a similar issue. When I scale the box div for trend. My highlight point move to another place. image image

ziaidexiuluo avatar Dec 07 '22 08:12 ziaidexiuluo