Skip to content
Chart.js

Tooltips

Custom-styled tooltips with title, label, and footer callbacks.

#chart#tooltips

Code

chartjs
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    datasets: [{ label: 'Sales', data: [30, 50, 45, 60] }]
  },
  options: {
    plugins: {
      tooltip: {
        enabled: true,
        backgroundColor: 'rgba(0,0,0,0.85)',
        titleColor: '#fff',
        bodyColor: '#fff',
        borderColor: '#fff',
        borderWidth: 1,
        padding: 10,
        cornerRadius: 6,
        displayColors: true,
        intersect: false,
        mode: 'index',
        callbacks: {
          title: (items) => 'Month: ' + items[0].label,
          label: (item) => item.dataset.label + ': $' + item.parsed.y + 'k',
          footer: (items) => {
            const total = items.reduce((sum, i) => sum + i.parsed.y, 0);
            return 'Total: $' + total + 'k';
          }
        }
      }
    }
  }
});