Wrong label value is displayed on point hover - Chart.JS

Question

When you hover point on a Line chart tooltip displays wrong value of label from x-axis. I am using the latest version of Chart.JS 2.8.0

Here is the fiddle: https://jsfiddle.net/2mq1vt0o/

This is all data from displayed dataset: https://i.stack.imgur.com/976q5.jpg

When I change the data range for example from 05-01-2018 https://i.stack.imgur.com/dSID8.jpg

As you can see, the line is on the right place but when I hover the point it displays a label which is the first value from labels which is wrong as it should display 06-01-2018.

{
  "data": {
    "datasets": [
      {
        "borderColor": "rgba(74,118,12,1.000)",
        "data": [
          {
            "x": "2018-01-06",
            "y": 0.242
          },
          {
            "x": "2018-01-07",
            "y": 0.197
          },
          {
            "x": "2018-01-08",
            "y": 0.15
          },
          {
            "x": "2018-01-09",
            "y": 0.15
          },
          {
            "x": "2018-01-10",
            "y": 0.15
          },
          {
            "x": "2018-01-11",
            "y": 0.137
          },
          {
            "x": "2018-01-12",
            "y": 0.11
          },
          {
            "x": "2018-01-13",
            "y": 0.11
          },
          {
            "x": "2018-01-14",
            "y": 0.21
          },
          {
            "x": "2018-01-15",
            "y": 0.273
          },
          {
            "x": "2018-01-16",
            "y": 0.3
          },
          {
            "x": "2018-01-17",
            "y": 0.237
          }
        ],
        "label": "onlydoe",
        "fill": false,
        "pointRadius": 5
      }
    ],
    "labels": [
      "2018-01-05",
      "2018-01-06",
      "2018-01-07",
      "2018-01-08",
      "2018-01-09",
      "2018-01-10",
      "2018-01-11",
      "2018-01-12",
      "2018-01-13",
      "2018-01-14",
      "2018-01-15",
      "2018-01-16",
      "2018-01-17"
    ]
  },
  "options": {
    "hover": {
      "mode": "x"
    }
  },
  "type": "line"
}

I would expect that when I hover a point it would display correct X axis value.

Can you post a fiddle, please. – Kunal Khivensara Apr 01 '19 at 08:02 — Kunal Khivensara, Apr 01 '19 at 08:02
https://jsfiddle.net/2mq1vt0o/ – sebaoka Apr 01 '19 at 22:57 — sebaoka, Apr 01 '19 at 22:57

score 2 · Accepted Answer · answered May 12 '19 at 00:37

Well I think that this is because you don't specify the xAxis type, so that try to add this(to your options):

    "scales": {
         xAxes: [{
              type: "time"
                }]
    }

Here is an example ( https://jsfiddle.net/z8xLspd7/1/ ):

And if you what to format those time values that appears when you hover the point to be more User Friendly, just add this(to your options):

    responsive:true,
    "scales": {
         xAxes: [{
              type: "time",
              time:{
                 format: timeFormat,
                 tooltipFormat: 'll'
                },
                scaleLabel: {
                    display:     true,
                    labelString: 'Date'
                }
            }]
        }

Here is an example ( https://jsfiddle.net/z8xLspd7/2/ ):

Reference: https://embed.plnkr.co/JOI1fpgWIS0lvTeLUxUp/

Wrong label value is displayed on point hover - Chart.JS

1 Answers1