How can i hide label data on chart.js tooltip content?

Question

I am using Metronic Theme and it's using Chart.js. On tooltip i need to show only data without label. But when i don't give labels param charts working wrong.

var config = {
type: 'line',
data: {
    labels: priceDate,
    datasets: [{
        label: "$",
        borderColor: color,
        borderWidth: border,

        pointHoverRadius: 4,
        pointHoverBorderWidth: 12,
        pointBackgroundColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
        pointBorderColor: Chart.helpers.color('#000000').alpha(0).rgbString(),
        fill: false,
        data: priceList,
    }]
},
options: {
    tooltips: {
        enabled: true,
    },
    responsive: true,
    maintainAspectRatio: true                
}

Answer 1

Had you tried labels: "priceDate", ?

Could this be working (instead of corrupting the retriever)?

options: {tooltips: {enabled: true, dateTimeLabelFormats: {day: '% %, %'}},

Answer 2

You can use formatter function within tooltip, and inside the function, you have access to this which you can get the data you want.

Here is an example:

  tooltip: {
    formatter: function() {
      return `${this.y} ${this.series.name}`;
    }
  },

Answer 3

Use the tooltip.headerFormat or tooltip.formatter callback to customize tooltip output.

API: https://api.highcharts.com/highcharts/tooltip.headerFormat

API: https://api.highcharts.com/highcharts/tooltip.formatter

Answer 4

better use tooltipformatter. there you can format how the tooltip should display data. here's a link to jsfiddle which shows only data and no label.

Answer 5

I solved issue with callback function.

tooltips: {
callbacks: {
 title: function() {}
},
enabled: true}

Answer 6

For ChartJS v4

plugins: {
    tooltip: {
        callbacks: {
            title: function() {
                return null;
            }
        }
    }
}