[Chartjs]-How to remove square label from tooltip and make its information in one line?

by

50👍

✅

here you go:

jsfiddle: http://jsfiddle.net/1v9fy5mz/

code:

html

<canvas id="canvas"></canvas>

js:

var ctx = document.getElementById("canvas").getContext("2d");

var data = {
  labels: ['January', 'February', 'March'],
  datasets: [{
    data: [1, 2, 3]
  }]
};

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    showAllTooltips: true,
    tooltips: {
      custom: function(tooltip) {
        if (!tooltip) return;
        // disable displaying the color box;
        tooltip.displayColors = false;
      },
      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
        },
        // remove title
        title: function(tooltipItem, data) {
          return;
        }
      }
    }
  }
});

84👍

Add this in your options object

tooltips: {
  displayColors: false
}

Update for version 3 or greater (from @hanumanDev below):

Remove ‘s’ from tooltips

tooltip: {
  displayColors: false
}

6👍

tooltips: {
      displayColors: false,
      callbacks: {
        // use label callback to return the desired label
        label: function(tooltipItem, data) {
          return tooltipItem.xLabel + " :" + tooltipItem.yLabel;
        },
        // remove title
        title: function(tooltipItem, data) {
          return;

        }
      }
    }

3👍

In version 3.8.0 of the chart.js plugin the tooltip config needs to go in the plugins config object, like this:

options: {
  plugins: {
    tooltip: {
      displayColors: false
    }
  }
}

Leave a comment