1

I just added tooltips: { mode: 'index', intersect: true } to this particular chart setup

The problem is that tooltip drops always in the wrong place

enter image description here

So I am hovering on a particular point on the chart but tooltip displays in completely different spot.

Any ideas how to fix?

Sergino
  • 10,128
  • 30
  • 98
  • 159

2 Answers2

1

Unfortunately I'm not able to reproduce the problem you described, in below code, tooltips: { mode: 'index', intersect: true } works just fine. Can you please provide a runnable code snippet that illustrates the issue you're facing?

const data = [{
    name: "series1",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 8
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 10
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 12
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 15
        },
         {
            date: "2016-05-31T00:00:00.000Z",
            value: 14
        },
        {
            date: "2016-06-30T00:00:00.000Z",
            value: 16
        },
        {
            date: "2016-07-31T00:00:00.000Z",
            value: 17
        }
    ]
}, {
    name: "series2",
    series: [{
            date: "2016-01-31T00:00:00.000Z",
            value: 5
        },
        {
            date: "2016-02-28T00:00:00.000Z",
            value: 7
        },
        {
            date: "2016-03-30T00:00:00.000Z",
            value: 10
        },
        {
            date: "2016-04-31T00:00:00.000Z",
            value: 13
        },
         {
            date: "2016-05-31T00:00:00.000Z",
            value: 12
        },
        {
            date: "2016-06-30T00:00:00.000Z",
            value: 14
        },
        {
            date: "2016-07-31T00:00:00.000Z",
            value: 15
        }       
    ]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'green',
              borderColor: 'green',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: true,
            position: 'top'
        },
        tooltips: { 
            mode: 'index', 
            intersect: true 
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                }
            }],
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
uminder
  • 23,831
  • 5
  • 37
  • 72
  • what is the best way to reproduce it online? Is there any online-seed I can use? – Sergino Feb 08 '20 at 13:02
  • @sreginogemoh: JavaScript/HTML code snippet, same as I used in my answer. – uminder Feb 08 '20 at 13:04
  • Hey just reproduced the issue here https://jsbin.com/yolodeqepi/2/edit?html,js,output Basically there is 2 issues, one is tooltip issue as I explained in the question and the other issue is that the dates on x-axis mismatched with a chart - if you hover on any point the tooltip show the previous month values. – Sergino Feb 08 '20 at 13:22
  • Also for some reason the x-axis from March but it should start from the Feb as per first value in the `series1`, probably related to the first or second issue or both – Sergino Feb 08 '20 at 13:27
1

From the sample code you provided in your comment to my first answer, I see that the values of your datasets don't start at the same x-position. Therefore mode: 'index' doesn't work and you should use mode: 'x' instead.

tooltips: {
    mode: 'x'
}

Please have a look at your adapted code: 

const data = [{
  name: "series1",
  series: [{
    "date": "2015-02-28T00:00:00.000Z",
    "value": 4946
  }, {
    "date": "2015-03-31T00:00:00.000Z",
    "value": 7174
  }, {
    "date": "2015-04-30T00:00:00.000Z",
    "value": 6981
  }, {
    "date": "2015-05-31T00:00:00.000Z",
    "value": 9461
  }, {
    "date": "2015-06-30T00:00:00.000Z",
    "value": 13387
  }, {
    "date": "2015-07-31T00:00:00.000Z",
    "value": 24302
  }, {
    "date": "2015-08-31T00:00:00.000Z",
    "value": 9994
  }, {
    "date": "2015-09-30T00:00:00.000Z",
    "value": 14999
  }, {
    "date": "2015-10-31T00:00:00.000Z",
    "value": 17700
  }, {
    "date": "2015-11-30T00:00:00.000Z",
    "value": 50822
  }, {
    "date": "2015-12-31T00:00:00.000Z",
    "value": 50919
  }, {
    "date": "2016-01-31T00:00:00.000Z",
    "value": 48754
  }, {
    "date": "2016-02-29T00:00:00.000Z",
    "value": 29803
  }, {
    "date": "2016-03-31T00:00:00.000Z",
    "value": 67236
  }, {
    "date": "2016-04-30T00:00:00.000Z",
    "value": 96319
  }, {
    "date": "2016-05-31T00:00:00.000Z",
    "value": 124185
  }, {
    "date": "2016-06-30T00:00:00.000Z",
    "value": 141557
  }, {
    "date": "2016-07-31T00:00:00.000Z",
    "value": 132527
  }, {
    "date": "2016-08-31T00:00:00.000Z",
    "value": 140417
  }, {
    "date": "2016-09-30T00:00:00.000Z",
    "value": 135075
  }, {
    "date": "2016-10-31T00:00:00.000Z",
    "value": 191392
  }, {
    "date": "2016-11-30T00:00:00.000Z",
    "value": 227628
  }, {
    "date": "2016-12-31T00:00:00.000Z",
    "value": 243538
  }, {
    "date": "2017-01-31T00:00:00.000Z",
    "value": 293096
  }, {
    "date": "2017-02-28T00:00:00.000Z",
    "value": 345766
  }, {
    "date": "2017-03-31T00:00:00.000Z",
    "value": 519761
  }, {
    "date": "2017-04-30T00:00:00.000Z",
    "value": 448786
  }, {
    "date": "2017-05-31T00:00:00.000Z",
    "value": 572362
  }, {
    "date": "2017-06-30T00:00:00.000Z",
    "value": 580894
  }, {
    "date": "2017-07-31T00:00:00.000Z",
    "value": 660067
  }, {
    "date": "2017-08-31T00:00:00.000Z",
    "value": 709063
  }, {
    "date": "2017-09-30T00:00:00.000Z",
    "value": 812561
  }, {
    "date": "2017-10-31T00:00:00.000Z",
    "value": 874424
  }, {
    "date": "2017-11-30T00:00:00.000Z",
    "value": 1076463
  }, {
    "date": "2017-12-31T00:00:00.000Z",
    "value": 1049066
  }, {
    "date": "2018-01-31T00:00:00.000Z",
    "value": 1239827
  }, {
    "date": "2018-02-28T00:00:00.000Z",
    "value": 1081402
  }, {
    "date": "2018-03-31T00:00:00.000Z",
    "value": 1556783
  }, {
    "date": "2018-04-30T00:00:00.000Z",
    "value": 1443372
  }, {
    "date": "2018-05-31T00:00:00.000Z",
    "value": 1491657
  }, {
    "date": "2018-06-30T00:00:00.000Z",
    "value": 1606459
  }, {
    "date": "2018-07-31T00:00:00.000Z",
    "value": 1814560
  }, {
    "date": "2018-08-31T00:00:00.000Z",
    "value": 2231426
  }, {
    "date": "2018-09-30T00:00:00.000Z",
    "value": 2199441
  }, {
    "date": "2018-10-31T00:00:00.000Z",
    "value": 2752529
  }, {
    "date": "2018-11-30T00:00:00.000Z",
    "value": 2849511
  }, {
    "date": "2018-12-31T00:00:00.000Z",
    "value": 2902949
  }, {
    "date": "2019-01-31T00:00:00.000Z",
    "value": 3373373
  }, {
    "date": "2019-02-28T00:00:00.000Z",
    "value": 3369580
  }, {
    "date": "2019-03-31T00:00:00.000Z",
    "value": 4114746
  }, {
    "date": "2019-04-30T00:00:00.000Z",
    "value": 4097378
  }, {
    "date": "2019-05-31T00:00:00.000Z",
    "value": 4232173
  }, {
    "date": "2019-06-30T00:00:00.000Z",
    "value": 3995196
  }, {
    "date": "2019-07-31T00:00:00.000Z",
    "value": 4589346
  }, {
    "date": "2019-08-31T00:00:00.000Z",
    "value": 4575779
  }, {
    "date": "2019-09-30T00:00:00.000Z",
    "value": 4556959
  }, {
    "date": "2019-10-31T00:00:00.000Z",
    "value": 5275366
  }, {
    "date": "2019-11-30T00:00:00.000Z",
    "value": 5433849
  }, {
    "date": "2019-12-31T00:00:00.000Z",
    "value": 4935529
  }, {
    "date": "2020-01-29T00:00:00.000Z",
    "value": 4764600
  }]
}, {
  name: "series2",
  series: [{
    "date": "2016-10-31T00:00:00.000Z",
    "value": 648388
  }, {
    "date": "2016-11-30T00:00:00.000Z",
    "value": 693729
  }, {
    "date": "2016-12-31T00:00:00.000Z",
    "value": 773365
  }, {
    "date": "2017-01-31T00:00:00.000Z",
    "value": 975006
  }, {
    "date": "2017-02-28T00:00:00.000Z",
    "value": 1082831
  }, {
    "date": "2017-03-31T00:00:00.000Z",
    "value": 1350222
  }, {
    "date": "2017-04-30T00:00:00.000Z",
    "value": 1289953
  }, {
    "date": "2017-05-31T00:00:00.000Z",
    "value": 1499037
  }, {
    "date": "2017-06-30T00:00:00.000Z",
    "value": 1605640
  }, {
    "date": "2017-07-31T00:00:00.000Z",
    "value": 1726461
  }, {
    "date": "2017-08-31T00:00:00.000Z",
    "value": 1853198
  }, {
    "date": "2017-09-30T00:00:00.000Z",
    "value": 1885029
  }, {
    "date": "2017-10-31T00:00:00.000Z",
    "value": 2168899
  }, {
    "date": "2017-11-30T00:00:00.000Z",
    "value": 2369837
  }, {
    "date": "2017-12-31T00:00:00.000Z",
    "value": 2118275
  }, {
    "date": "2018-01-31T00:00:00.000Z",
    "value": 2708846
  }, {
    "date": "2018-02-28T00:00:00.000Z",
    "value": 2523632
  }, {
    "date": "2018-03-31T00:00:00.000Z",
    "value": 2862202
  }, {
    "date": "2018-04-30T00:00:00.000Z",
    "value": 2618252
  }, {
    "date": "2018-05-31T00:00:00.000Z",
    "value": 3179610
  }, {
    "date": "2018-06-30T00:00:00.000Z",
    "value": 3110572
  }, {
    "date": "2018-07-31T00:00:00.000Z",
    "value": 3433279
  }, {
    "date": "2018-08-31T00:00:00.000Z",
    "value": 4107825
  }, {
    "date": "2018-09-30T00:00:00.000Z",
    "value": 3785735
  }, {
    "date": "2018-10-31T00:00:00.000Z",
    "value": 4079134
  }, {
    "date": "2018-11-30T00:00:00.000Z",
    "value": 4072219
  }, {
    "date": "2018-12-31T00:00:00.000Z",
    "value": 3606818
  }, {
    "date": "2019-01-31T00:00:00.000Z",
    "value": 4512291
  }, {
    "date": "2019-02-28T00:00:00.000Z",
    "value": 4334171
  }, {
    "date": "2019-03-31T00:00:00.000Z",
    "value": 4657378
  }, {
    "date": "2019-04-30T00:00:00.000Z",
    "value": 4633421
  }, {
    "date": "2019-05-31T00:00:00.000Z",
    "value": 4803755
  }, {
    "date": "2019-06-30T00:00:00.000Z",
    "value": 4633593
  }, {
    "date": "2019-07-31T00:00:00.000Z",
    "value": 5140042
  }, {
    "date": "2019-08-31T00:00:00.000Z",
    "value": 5040706
  }, {
    "date": "2019-09-30T00:00:00.000Z",
    "value": 5256548
  }, {
    "date": "2019-10-31T00:00:00.000Z",
    "value": 5982276
  }, {
    "date": "2019-11-30T00:00:00.000Z",
    "value": 5633371
  }, {
    "date": "2019-12-31T00:00:00.000Z",
    "value": 4892260
  }, {
    "date": "2020-01-29T00:00:00.000Z",
    "value": 4887260
  }]
}];

new Chart(document.getElementById('myChart'), {
    type: 'line',
    data: {
        datasets: [
          {
              label: data[0].name,
              fill: false,
              backgroundColor: 'red',
              borderColor: 'red',
              data: data[0].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }, {
              label: data[1].name,
              fill: false,
              backgroundColor: 'green',
              borderColor: 'green',
              data: data[1].series.map(x => ({ x: new Date(x.date), y: x.value }))
          }
        ]
    },
    options: {
        responsive: true,
        title: {
            display: false
        },
        legend: {
            display: true,
            position: 'top'
        },
        tooltips: { 
            mode: 'x'
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month',
                    displayFormats: {
                        'month': 'MMM YYYY',
                    },
                    tooltipFormat: 'MMM YYYY'
                }
            }],
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>
uminder
  • 23,831
  • 5
  • 37
  • 72
  • when you hover on March 2015 the tooltip show Feb 2015 – Sergino Feb 08 '20 at 13:48
  • @sreginogemoh: when hovering over the first point, the tooltip shows "Feb 2015", which corresponds to the first series value. Therefore the tooltip shows the correct data. The position of the x-axis labels however is not in sync with the line chart data points. Please post a new question for this new issue. – uminder Feb 08 '20 at 14:00
  • here it is https://stackoverflow.com/questions/60127534/position-of-the-x-axis-labels-is-not-in-sync-with-the-line-chart-data-points – Sergino Feb 08 '20 at 14:05