Chart.js two y axes line chart tooltip value incorrect for 2nd y axis

Question

I have created a working chart with chart.js and I would like to fix a minor problem I have noticed with it.

Have a look at this pen. or the copy below.

// Global settings for all charts
// set default to not fill any lines
Chart.defaults.global.elements.line.fill = false;

// lines chart with 4 lines and time on x axis
var ChartData = {
  labels: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
  datasets: [{
    type: 'line',
    label: 'A',
    yAxisID: "y-axis-1",
    backgroundColor: "rgba(110,250,150,0.3)",
    borderColor: "rgba(110,250,150,0.5)",
    data: [2500, 2600, 4100, 3400, 2150, 3560, 4500]
  }, {
    type: 'line',
    label: 'B',
    yAxisID: "y-axis-1",
    backgroundColor: "rgba(50,255,90,0.3)",
    borderColor: "rgba(50,255,90,0.5)",
    data: [420, 510, 900, 700, 920, 950, 820]
  }, {
    type: 'line',
    label: 'Wait',
    yAxisID: "y-axis-2",
    backgroundColor: "rgba(255,000,000,0.3)",
    borderColor: "rgba(255,000,000,0.8)",
    data: ['00:28', '00:45', '00:15', '00:12', '00:22', '00:55', '00:10']
  }, {
    type: 'line',
    label: 'D',
    yAxisID: "y-axis-1",
    backgroundColor: "rgba(120,180,255,0.3)",
    borderColor: "rgba(120,180,255,0.5)",
    data: [4200, 1100, 1300, 1850, 1780, 2440, 3800]
  }]
};


var ctx = document.getElementById("Chart");
// declare a chart
var chart = new Chart(ctx, {
  type: 'line',
  data: ChartData,
  options: {
    title: {
      display: true,
      text: "Chart.js line Two Y Axis"
    },
    tooltips: {
      mode: 'label'
    },
    responsive: true,
    scales: {
      xAxes: [{
        type: 'time',
          time: {
            parser: 'hh:mm:ss',
            unit: 'seconds',
            unitStepSize: 3600,
            min: '08:00:00',
            max: '14:00:00',
            displayFormats: {
              'seconds': 'HH:mm'
            }
          },
        scaleLabel: {
          display: true,
          labelString: 'Time'
        },
          // makes time durations on x axis stay in linier time scale.
          distribution: 'linear',
      }],
      yAxes: [{
        id: "y-axis-1",
        position: "left",
        scaleLabel: {
          display: true,
          labelString: 'Other Title Here'
        }
      }, {
        id: "y-axis-2",
        position: "right",
          ticks: {
          max: '20:00',
          min: '00:00'
        },
        type: 'time',
          time: {
            parser: 'mm:ss',
            unit: 'seconds',
            unitStepSize: 3600,
            min: '08:00:00',
            max: '14:00:00',
            displayFormats: {
              'seconds': 'MM.ss'
            }
          },
        scaleLabel: {
          display: true,
          labelString: 'Wait (mm:ss)',
          fontColor: 'rgba(255,0,0,0.8)'
        },
        type: 'time',
          time: {
            parser: 'mm:ss',
            unit: 'seconds',
            unitStepSize: 60,
            min: '00:00',
            max: '20:00',
            displayFormats: {
              'seconds': 'mm.ss'
            }
          },
      }]
    }
  }
});

If you move the pointer over the points on the red line data, you can see that the tooltip shows correct values for all other lines, but instead of the correct value for the red line, it displays the values of the time I have on the x axes. The actual chart line for the red value is in the correct place, only the value in the tooltip is wrong. In this example, the red line is the only line that uses the 2nd y axes on the right, so I assume it's something to do with that.

I did look at this question here but my axes is already set up as time type, assuming I'm following that answer correctly.

How can I correct this?

Note: The x axes times are times in the day from 8AM to 2PM. The times on the 2nd y axes on the right are not times of the day, but lengths of time in minutes.

Answer 1

You have to specify the X axis of each of the Wait data.
Paste it like this in your code:

data: [
    { x: "08:00", y: "00:28" },
    { x: "09:00", y: "00:45" },
    { x: "10:00", y: "00:15" },
    { x: "11:00", y: "00:12" },
    { x: "12:00", y: "00:22" },
    { x: "13:00", y: "00:55" },
    { x: "14:00", y: "00:10" }
]