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

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,
        },
      }]
    }
  }
};

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`;
              },
            },
          },
        },
      }}