How to pass custom tootlip for each data point in Line chart : Highcharts+ ReactJS

Question

I am trying to add a custom tooltip for each data point in line chart. The data that I am trying to pass to this line chart has the format:

The data that I receive from the API

[
  {
     old : "1",
     current : "2",
     oldtime : "1586217600000"
     newtime: "1583625600000"
  },
  {
     old : "2",
     current : "3",
     oldtime : "1596217600000"
     newtime: "1583625600000"
  },
  {
     old : "4",
     current : "7",
     oldtime : "1581217600000"
     newtime: "1583185600000"
  }
]

I was able to bring the two line graphs for old and current after transforming them into the following way

[ 
  {
    "name" : "old"
    "data" : [1,2,4]
  },
  {
    "name" : "current"
    "data" : [2,3,7]
  },
]

I am able to get the tooltip for these line graphs where it shows old and current value for each point. Now all I want is how to transform the api data to get the custom tooltip that includes old,current,oldtime,newtime values for each data point.

I am using the following function to transfrom the data

  createLineChart = graphData => {
    let data = [],old = [];
    graphData.forEach(elem => {
      old.push(elem.old);
      current.push(elem.current);
    });
    data.push({ name: "BASELINE", data: old });
    data.push({ name: "CURRENT", data: current });
    return data;
  };

Code sandbox: https://codesandbox.io/s/react-line-chart-n9g6o

Can someone help me here

Answer 1

1. You need to add those values - oldtime and newtime to the point as an additional object property. I assumed that those values are ots and cts in your demo.

   createLineChart = graphData => {
     let data = [],
         old = [],
         current = [];
     let res1 = this.splitAndMerge(graphData);
       res1.forEach((elem, i) => {
         old.push([i, elem.old, elem.ots]);
         current.push([i, elem.current, elem.cts]);
       });
     data.push({ name: "BASELINE", data: old, keys: ["x", "y", "ots"] });
     data.push({ name: "CURRENT", data: current, keys: ["x", "y", "cts"] });
     return data;
   };
   

In the above code, I add also the keys feature to the series object which is responsible to assign values from array properly.

API: https://api.highcharts.com/highcharts/series.line.keys

2. Next, when point includes wanted values, I did some changes in your formatter callback.

   formatter: function() {
     let self = this;
     let formattedString = "<small></small><table>";
     self.points.forEach(elem => {
       formattedString +=
         '<tr><td style="color: {series.color}">' +
          elem.series.name +
          ": </td>";
       formattedString +=
         '<td style="text-align: right"><b>' + elem.y + "</b></td>";
       if (elem.point.cts) {
         formattedString +=
           '<td style="text-align: right">cts: <b>' +
           elem.point.cts +
           "</b></td></tr>";
       } else {
         formattedString +=
           '<td style="text-align: right">cts: <b>' +
           elem.point.ots +
           "</b></td></tr>";
       }
     });
    return formattedString;
   }
   

And the final result: https://stackblitz.com/edit/react-qjsfbl?file=LineChart.js