I want to hide the label in a tooltip because it shows undefined

Question

I am using chart.js to show a line chart. How can I hide a tooltip label for a chart.js line chart? The label in the tooltip is showing undefined so I want to hide the label (please see the screenshot)?

Perhaps there is a way to modify tooltip where I can show only the legends value in tooltip? My code is as follows:

  myLine = new Chart(ctx).Line(lineChartData, {
      type: 'line',
      responsive: true,
      scaleShowGridLines : false,
      bezierCurve : false,
      animationEasing: "linear",
      tooltipEvents: ["mousemove", "touchstart", "touchmove"],
      showTooltips: true,
      scaleLineColor: "rgba(0,0,0,.8)",
  });

Answer 1

Just set the tooltipTitleFontSize to 0 in your options.

---

Preview

---

Script

myLine = new Chart(ctx).Line(lineChartData, {
    ...
    tooltipTitleFontSize: 0
});

Answer 2

The accepted answer won't work in newer versions of chart.js, as Aman said in comments, what you can use now is this:

tooltips: { titleFontSize: 0 }

Example:

var bar_chart = document.getElementById('bar_canvas').getContext('2d');
window.myBar = new Chart(bar_chart, {
    type: 'bar',
    data: bar_chart_data,
    options: {
        tooltips: {
            titleFontSize: 0,
            bodyFontSize: 14,
        }
    }
});

Answer 3

I know I am late, but I guess it still has merit to add this one.

check this : https://stackoverflow.com/a/44632748/12061669

It uses a function to hide the title:

options:{
   tooltips:{
     callbacks:{
        title: ()=>{}
     }
   }
}