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

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-04-09T09:30:13

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

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

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

1 Answers