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)",
  });

Pendulous

I want to hide the label only in tootlip is there any way. – Pendulous

Answer 1

Just set the tooltipTitleFontSize to 0 in your options.

---

Preview

---

Script

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

Cy

It doesn't work, I am using v2.7.1, is there any other way to do so ? – Thorite

Answer 2

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

check this : https://mcmap.net/q/650038/-how-do-you-hide-the-title-of-a-chart-tooltip

It uses a function to hide the title:

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

Danelledanete

Answer 3

Setting the title's font size to zero is not ideal as you will still see an (ugly) extra space on top of the tooltip, as if the title line is still there - which honestly is what you'd expect.

Instead, I used Yumin Gui's answer but had to return null for it to work: `

tooltips: {
  callbacks: {
    title: () => null,
  },
},

The result is exactly as in the pie charts (which does not have a title in its default tooltips).

Glottal

Thanks! This is the only solution that worked, it's important that something is returned even null and therefore this is the correct answer. – Washerman

Answer 4

To hide the tooltip title/label, it should be added in the options object for that chart as follows:

options: {
   plugins: {
      tooltip: {
         callbacks: {
            title : () => null // or function () { return null; }
         }
      }
   }
}

Do refer to the documentation to understand better that it should be handled with a custom callback function, and it is not a config that can be set in options directly.

Cryoscopy

Answer 5

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,
        }
    }
});

Shanon