Sometimes, we want to set additional data to HighCharts series with JavaScript.

In this article, we’ll look at how to set additional data to HighCharts series with JavaScript.

How to set additional data to HighCharts series with JavaScript?

To set additional data to HighCharts series with JavaScript, we can add the tooltip.formatter method and the series array.

For instance, we write

const chartData = [
  { timestamp: 1515059819853, value: 1, somethingElse: "foo" },
  { timestamp: 1515059838069, value: 2, somethingElse: "bar" },
  { timestamp: 1515059838080, value: 3, somethingElse: "baz" },
  // ...
];

const Chart = Highcharts.stockChart(myChart, {
  // ...options
  tooltip: {
    formatter() {
      const pointData = chartData.find((row) => row.timestamp === this.point.x);
      // ...
    },
  },
  series: [
    {
      name: "Numbers over the course of time",
      data: chartData.map((row) => [row.timestamp, row.value]),
    },
  ],
});

to create a stock chart with Highcharts.stockChart.

In the object in the 2nd argument, we add the tooltip.formatter method to find the pointData for the point with the data from this.point.x x coordinate value.

And then we return the text for the tooltip.

In series we add an array with the data form the x and y axes.

Conclusion

To set additional data to HighCharts series with JavaScript, we can add the tooltip.formatter method and the series array.