[Chartjs]-ChartJS (React) Line Chart – How to show single tooltip with data and labels from 3 (multiple) dataset?

I have also been facing the same issue with react-chartjs-2 where I was unable to show multiple tooltips for Line Graph. After reading the document and trial and error, somehow I have cracked the solution.

There are three things. Need to configured with right namespace.

1.interaction:

interaction: {
              mode: "index",
              intersect: false,
            }

2. tooltips:

tooltips:{
     mode: "index",
     intersect: false,
 }

3.Hover:

 hover: {
            mode: "nearest",
            intersect: true,
          },

Three configuration with correct name will as below in options props.

 options={{
        interaction: {
          mode: "index",
          intersect: false,
        },

        plugins: {
          legend: {
            display: true,
            position: "right",
            align: "start",
            labels: {
              usePointStyle: true,
              boxWidth: 6,
            },
            title: {
              display: true,
              text: "Chart.js Bar Chart",
            },
          },
          tooltips: {
            mode: "index",
            intersect: false,
          },
          hover: {
            mode: "nearest",
            intersect: true,
          },
        },
        responsive: true,
        title: {
          display: false,
        },
        scales: {
          x: {
            type: "time",
            ticks: {
              autoSkip: true,
              maxTicksLimit: 14,
            },
            time: {
              unit: "month",
              displayFormats: {
                quarter: "MMM YYYY",
              },
            },
          },
          y: {
            ticks: {
              callback: function (value, index, values) {
                return `${value}  kVA`;
              },
            },
          },
        },
      }}

Try removing the tooltips in your code and set your code – as is shown in this working jsfiddle I made.

So, the config section should look like this:

// NOTE: "full_data" is the data source (i.e res.data, in your case).

var config = {
  type: 'line',
  data: {
    labels: Object.keys(full_data.timeline.cases),
    showTooltips: true,
    datasets: [{
      label: "Covid-19 Cases", //CASES DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#eb1515",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#eb1515",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#eb1515",
      pointHoverBorderColor: "#eb1515",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.cases)
    }, {
      label: "Covid-19 Deaths", //DEATHS DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#1a1c1a",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#1a1c1a",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#1a1c1a",
      pointHoverBorderColor: "#1a1c1a",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.deaths)
    }, {
      label: "Covid-19 Recoveries", //RECOVERIES DATASET
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(75,192,192,0.4)",
      borderColor: "#0ec90e",
      borderCapStyle: "butt",
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "#0ec90e",
      pointBackgroundColor: "#fff",
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: "#0ec90e",
      pointHoverBorderColor: "#0ec90e",
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      maintainAspectRatio: false,
      data: Object.values(full_data.timeline.recovered)
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Dates'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
        },
      }]
    }
  }
};