Issue with tooltip: mode 'index'

Please check this code pen :- https://codepen.io/bhavin00-the-reactor/pen/abZqXWz

I used tooltip mode index. as I want only 1 tooltip item for each line, there is two line so I need 2 tooltip items (1 for each line).

When I used mode: index then It is displaying only 1 tooltip item for 1 line, but then there is issue with tooltip location some time…

I attached below image please check & help me to resolve this…

In above image, I am hovering before 3rd Jan place but tooltip is coming for 6th Jan…

Is there any other alternative right now. as It looks issue with mode: index

Expected Behavior

Current Behavior

Possible Solution

Steps to Reproduce

Context

Environment

• Chart.js version: 2.9.4
• Browser name and version: Chrome latest
• Link to your project:

[kurkle]

index mode works with the data index and for proper functionality each dataset has to have equal amount of data. The pen uses 2.7.3, but if you are really using 2.9.4 as you say, then you’d probably get the result you are looking for with mode: 'nearest', axis: 'x', intersect: false

edit: nvm, it only works correctly in v3.

[bhavin00]

Hey Guys,

I did 1 work around, I set, mode: x, so then there is many tooltipItems for same line,

to get only 1 tooltipItem for each line, I customized tooltip.body.

tooltips: {
        mode: 'x',
        axis: 'x',
        intersect: false,
        backgroundColor: '#FFFFFF',
        bodyFontSize: 13,
        bodyFontColor: '#333333',
        bodyFontFamily: 'Open Sans',
        titleFontColor: '#333333',
        titleFontFamily: 'Open Sans',
        titleFontStyle: 'bold',
        titleFontSize: 13,
        titleMarginBottom: 15,
        displayColors: true,
        xPadding: 15,
        yPadding: 15,
        bodySpacing: 12,
        callbacks: {
            label(tooltipItem, data) {
                let label = data.datasets[tooltipItem.datasetIndex].label || '';
                if (label) {
                    label += ' - ';
                }
                label += `${Math.round(tooltipItem.yLabel)}%`;

                return label;
            }
        },
        custom(tooltipModel) {
            if(get(tooltipModel, 'dataPoints.length', 0) > 1) {
                const dataPointIdexes = [];
                const result = [];
                const result1 = [];
                forEach(tooltipModel.dataPoints, (dp, index) => {
                    if(!includes(dataPointIdexes, dp.datasetIndex)) {
                        result.push(dp);
                        dataPointIdexes.push(dp.datasetIndex);
                        result1.push(tooltipModel.body[index]);
                    }
                });
                tooltipModel.dataPoints = result;
                tooltipModel.body = result1;
                tooltipModel.height = tooltipHeaderHeight + (tooltipItemHeight * tooltipModel.body.length);
            }
        }
    },
    hover: {
        mode: 'x',
        intersect: false
    }

Hope It will help someone.

I am closing this bug as It is already created. as per above message of @LeeLenaleee.