Clever Geek Handbook

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

I am using chart.js to show a graph. How to hide the tooltip label for a chart.js line chart? The label in the tooltip is showing undefined

, so I want to hide the label (see screenshot)?

Perhaps there is a way to change the tooltip where I can only show the legend value in the tooltip? My code looks like this:

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

enter image description here

+2


source to share


3 answers


Just set tooltipTitleFontSize

in 0

in your settings.

Preview

enter image description here



Script

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


source


The accepted answer will not work in newer versions of chart.js, as Aman said in the comments, you can now use the following:

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


source


I know I'm late, but I think it's still worth adding this one.

check this out: fooobar.com/questions/2416557 / ...

It uses a function to hide the title:

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


source






More articles:


All Articles