CODEWITHSUNDEEP
chart.jslinechart
Ravi Kanth
Ravi Kanth

Reputation: 1210

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

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

enter image description here

Upvotes: 2

Views: 4806

Answers (5)

Divyesh Parmar
Divyesh Parmar

Reputation: 391

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.

Upvotes: 1

BoDeX
BoDeX

Reputation: 926

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).

Upvotes: 1

Yumin Gui
Yumin Gui

Reputation: 462

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: ()=>{}
     }
   }
}

Upvotes: 1

kojaa
kojaa

Reputation: 31

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

Upvotes: 0

potatopeelings
potatopeelings

Reputation: 41075

Just set the tooltipTitleFontSize to 0 in your options.

Preview

enter image description here

Script

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

Upvotes: 6

Related Questions