[Chartjs]-How to customize the tooltip of a Chart.js Line Chart?

by

6👍

✅

You can define callback functions for the title and content of the tooltips using options.tooltips.callbacks.

const options = {
  type: 'line',
  options: {
    tooltips: {
      callbacks: {
        title: function(t, d) {
          return moment(d.labels[t[0].index]).format('dd MMM DD, YYYY');
        },
        label: function(t, d) {
          const label = d.datasets[t.datasetIndex].label;
          const value = d.datasets[t.datasetIndex].data[t.index];
          const sign = value >= 0 ? '+' : '';
          return `${label}: ${sign}${value.toFixed(2)}%`;
        }
      }
    }
  }
};

Demo

const dateRange = n =>
  (now =>
    new Array(n).fill(0).map((value, index) =>
      new Date(now + (8.64e7 * index))))
  (Date.now());

const palette = [{
  hex: '#5946B0',
  rgba: 'rgba(89, 70, 176, 0.33)'
}, {
  hex: '#eab925',
  rgba: 'rgba(234, 185, 37, 0.33)'
}];

const randRange = n =>
  new Array(n).fill(0).map(() =>
    chance.floating({ min: -100, max: 300 }))

const options = {
  type: 'line',
  data: {
    labels: dateRange(7),
    datasets: [{
      label: 'Investment',
      data: randRange(7),
      borderColor: palette[0].hex,
      backgroundColor: palette[0].rgba,
      pointBackgroundColor: 'white',
      borderWidth: 1
    }, {
      label: 'Return',
      data: randRange(7),
      borderColor: palette[1].hex,
      backgroundColor: palette[1].rgba,
      pointBackgroundColor: 'white',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        }
      }],
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    },
    tooltips: {
      // See: https://stackoverflow.com/a/44010778/1762224
      callbacks: {
        title: function(t, d) {
          return moment(d.labels[t[0].index]).format('dd MMM DD, YYYY');
        },
        label: function(t, d) {
          const label = d.datasets[t.datasetIndex].label;
          const value = d.datasets[t.datasetIndex].data[t.index];
          const sign = value >= 0 ? '+' : '';
          return `${label}: ${sign}${value.toFixed(2)}%`;
        }
      },
      backgroundColor: "#FAFAFA",
      borderColor: "lightgreen",
      borderWidth: 1,
      titleFontColor: "black",
      titleFontStyle: "bold",
      displayColors: false,
      bodyFontColor: "black"
    }
  }
};

const ctx = document.getElementById('chart').getContext('2d');
new Chart(ctx, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="120"></canvas>

If you need to render a completely customized tooltip with CSS, you may need to define a options.tooltips.custom renderer function, but it may prove to be more difficult.

Leave a comment