Chart.js - Tooltips and Labels

Chart.js – Tooltips and Labels

We can make creating charts on a web page easy with Chart.js. In this article, we’ll look at how to create charts with Chart.js.

Tooltips

We can change the tooltips with the option.tooltips properties.

They include many options like the colors, radius, width, text direction, alignment, and more.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12.35748, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          let label = data.datasets[tooltipItem.datasetIndex].label || '';

          if (label) {
            label += ': ';
          }
          label += Math.round(tooltipItem.yLabel * 100) / 100;
          return label;
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

to round the numbers to 2 digits.

We have the tooltipItem.yLabel property with the y-axis value.

Now we’ll see that the Red bar’s tooltip shows a number with 2 decimal digits when we hover on it.

Label Color Callback

We can also change the label color callback.

For example, we can write:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12.35748, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        labelColor(tooltipItem, chart) {
          return {
            borderColor: 'rgb(255, 0, 0)',
            backgroundColor: 'rgb(255, 0, 0)'
          };
        },
        labelTextColor(tooltipItem, chart) {
          return 'lightgray';
        }
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We have the options.tooltips.callbacks property with the labelColor method to return an object with the borderColor and the backgroundColor properties.

borderColor has the border color of the tooltip.

And backgroundColor has the background color of the tooltip.

Also, the labelTextColor is a method that returns the color of the tooltip label text.

The tooltipItem object has many properties.

They include the label property with the label string.

value has the value.

xLabel and yLabel have the x and y label values.

datasetIndex has the index of the dataset that the item comes from.

index has the index of the data item in the dataset.

x and y are the x and y position of the matching point.

External (Custom) Tooltips

We can customize our tooltip with the custom method:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{
      label: '# of Votes',
      data: [12.35748, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      enabled: false,
      custom(tooltipModel) {
        var tooltipEl = document.getElementById('chartjs-tooltip');
        if (!tooltipEl) {
          tooltipEl = document.createElement('div');
          tooltipEl.id = 'chartjs-tooltip';
          document.body.appendChild(tooltipEl);
        }

        if (tooltipModel.body) {
          tooltipEl.innerHTML = tooltipModel.body[0].lines
        }

      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

We create a tooltip element and then set the innerHTML to the body[0].lines property’s value.

Now we should see the label value displayed below the graph.