Chart JS 2.x: How to show a tooltip in a timeline chart?

Question

I am using Chart.js 2.x line chart to create a timeline events chart.

It is working well but I can't figure out how to show a tooltip when the mouse goes over a line. The information I want to show is the same shown in the labels (in the example below 'Label A', 'Label B' or 'Label C'. I tried to add the tooltips options enabled = true and mode = label but it doesn't work.

Here is my JSFiddle

Here is my code:

HTML

<div style="height: 250px;">
<canvas id="timeline"></canvas>
</div>

Javascript

var ctx = $("#timeline").get(0).getContext("2d");

var data = {
  labels: ['Red','Blue','Yellow'],
  datasets: [
    {
      label: 'Label A',
      backgroundColor: "rgba(208,255,154,1)",
      borderColor: "rgba(208,255,154,1)",
      fill: false,
      borderWidth : 15,
      pointRadius : 0,
      data: [
        {
          x: new Date(2014,01,01),
          y: 3                                                    
        }, {
            x: new Date(2017,10,01),
            y: 3                                                    
        }
      ]
    },
    {
      label: 'Label B',
      backgroundColor: "rgba(208,255,154,1)",
      borderColor: "rgba(208,255,154,1)",
      fill: false,
      borderWidth : 15,
      pointRadius : 0,
      data: [
        {
          x: new Date(2009,01,01),
          y: 2                                                    
        }, {
            x: new Date(2012,09,01),
            y: 2                                                    
        }
      ]
    },
    {
      label: 'Label C',
      backgroundColor: "rgba(246,156,85,1)",
      borderColor: "rgba(246,156,85,1)",
      fill: false,
      borderWidth : 15,
      pointRadius : 0,
      data: [
        {
          x: new Date(2017,01,01),
          y: 1                                                    
        }, {
            x: new Date(2017,08,01),
            y: 1                                                    
        }
      ]
    },
  ]
};

var options = {
  maintainAspectRatio: false,
  legend : {
    display : true
  },
  scales: {
    xAxes: [{
      type: 'time',
      unit: 'month',
      unitStepSize: 1,
      time: {
        displayFormats: {
          'month': 'MM/YY',
          'quarter': 'MM/YY'
        }
      },
      position: 'bottom',
      ticks : {
        beginAtzero :true
      }},
            {
              type: 'time',
              unit: 'month',
              unitStepSize: 1,
              time: {
                displayFormats: {
                  'month': 'MM/YY',
                  'quarter': 'MM/YY'
                }
              },
              position: 'top',
              ticks : {
                beginAtzero :true
              }
            }],
    yAxes : [{
      display: false,
      scaleLabel : {
        display : false
      },
      ticks : {
        beginAtZero :true,
        max : 5
      }
    }]
  },
  tooltips: {
    enabled: true,
    mode: 'label',
  },
};

var scatterChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

Answer 1

I had to add the intersect: false property to the tooltips

Updated JSFiddle

Tooltip code:

  tooltips: {
    enabled: true,
    intersect: false,
    titleFontSize: 0,
    callbacks: {
      label: function(tooltipItems, data) {
        return data.datasets[tooltipItems.datasetIndex].label || 'Other';
      },
    }
  }