How to customize the tooltip of a Chart.js Line Chart?

Question

I'm trying to show some data using a Line chart from Chart.js

My current chart looks like this:

My desired output should be displayed as follows:

My code for the first chart is the following:

var chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: This.xAxis,
    datasets: [{
      backgroundColor: gradient,
      pointBackgroundColor: "white",
      borderWidth: 1,
      borderColor: "#5946B0",
      pointRadius: 2,
      displayColors: false,
      data: This.yAxis
    }]
  },
  options: {
    title: {
      display: false,
      text: "Test"
    },
    tooltips: {
      backgroundColor: "#FAFAFA",
      borderColor: "lightgreen",
      borderWidth: 1,
      titleFontColor: "black",
      titleFontStyle: "normal",
      displayColors: false,
      bodyFontColor: "black"
    },
    legend: {
      display: false
    },
    plugins: {
      zoom: {
        pan: {
          enabled: true,
          mode: "x",
          speed: 10,
          threshold: 10
        },
        zoom: {
          enabled: true,
          mode: "y"
        }
      }
    }
  }
});

Does this answer help? https://stackoverflow.com/a/59968620/2358409 — uminder, Dec 21 '20 at 14:44
I looked, but unfortunately it is not useful for me, because I want to display the tooltip in exactly the same way — mohammad reza esmailzadeh, Dec 21 '20 at 14:49

score 6 · Accepted Answer · answered Dec 21 '20 at 15:14

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.

I want the word return to be green in the tooltip, please help me — mohammad reza esmailzadeh, Dec 21 '20 at 15:38
@mohammadrezaesmailzadeh You mean the value of "Return" to be green? Well, you would have to render your own tooltip. See my final comment. I will see what I can do, but I will have to come back to this. — Mr. Polywhirl, Dec 21 '20 at 15:59

How to customize the tooltip of a Chart.js Line Chart?

1 Answers1

Demo