Wrong label on point hover - Line chart

[sberk97]

While providing X and Y in data for Line chart and then adding more labels than there are points in the dataset wrong label is showing up on hovering the point. Example: https://jsfiddle.net/2mq1vt0o/

Expected Behavior

As it is in the example, when you hover the first point it should display the label that is underneath that point (x-axis), not the first label on the chart. Correct label is provided for this point.

Current Behavior

At this moment when you hover a point it displays the first value from x-axis.

Steps to Reproduce (for bugs)

https://jsfiddle.net/2mq1vt0o/

Context

Simply I just wanted to display few datasets on a chart which can have space between each other. For example, show data for dates between 2018-01-01 to 2018-03-01. First dataset could have data for dates 2018-01-05 to 2018-01-25 and the second one 2018-02-05 to 2018-02-25. Problem was that when you didn't provide any x-axis values chart has been asigning these values in order which they are provided to labels. So then I found out that I can provide both x and y value for each point. Now it nearly works, only that tooltip when you hover a point displays wrong X value, just as it was when you didn't provide X axis value.

Environment

• Chart.js version: 2.8.0
• Browser name and version: Firefox 63

[borislobanov92]

Just add an empty data point to the data array.

"data": [
          {
                // this will fix your problem
          },
          {
            "x": "2018-01-06",
            "y": 0.242
          },

Here's a fiddle: https://jsfiddle.net/aoqyetz0/

[kurkle]

You can use time scale and skip providing any labels: https://jsfiddle.net/oetp4f1a/

[sberk97]

Thanks a lot, this solution worked. Also, I have one more solution similar to @kurkle solution here: https://stackoverflow.com/a/56095328/7259312

[niklashaug]

I have the same issue but unfortunately time scale doesn‘t work for me.
@borislobanov92 your idea seems interesting but it will only work if I only have one dataset - but I have multiple ones. And ideas how to fix it for multiple datasets?

[niklashaug]

Time does not work for me since it throws some errors. In addition, I get all my data preformatted from PHP / DB, so there I don‘t really want to change anything here.
The solution with the empty object only works if you have one dataset:
https://jsfiddle.net/nm4o25pe/

[sberk97]

In your fiddle second dataset starts with 5th Jan so actually it displays properly, look here: https://jsfiddle.net/k1pdeqc6/

[niklashaug]

Yes, you added another empty object so it worked again. But the problem is that you have to add the empty object for each dataset that skips a x axis value, otherwise the label will not show the expected value.
See updated fiddle:
https://jsfiddle.net/Lh395c2q/