Highcharts - 如何从提供的 JSON 数据中获取价值以在 xAxis 或工具提示上使用

Question

im trying to create chart on web using javascript on JSP page. I found highcharts and it seems good. I try to use it, and was wondering how to get value from my series of data and show it on tooltips and xaxis of the chart as show in screenshot below. Screenshot

do anyone have idea how to achieve that ? so far, i could only get the "name" attribute using "this.series.name", but i couldn't get value from the data, i want to get data period "01 Jun 2022 - 05 Jun 2022".

below is my series of data resulted from SQL select :

{"data": [
   ["01 Jun 2022 - 05 Jun 2022",2409],
   ["06 Jun 2022 - 12 Jun 2022",2722],
   ["13 Jun 2022 - 19 Jun 2022",2660]
 ]
,"name":"Unique Users"}

From above example, i can get 2409 using "this.y" , but no idea how to get "01 Jun 2022 - 05 Jun 2022" and show it on tooltip and xaxis value. Thanks.

Answer 1

Inside tooltip.formatter you can logs this object and look how it's build.

let JSON = [
  ["01 Jun 2022 - 05 Jun 2022", 2409],
  ["06 Jun 2022 - 12 Jun 2022", 2722],
  ["13 Jun 2022 - 19 Jun 2022", 2660]
];

let chart = Highcharts.chart('container', {
  series: [{
    data: JSON
  }],
    tooltip: {
        formatter: function(){
            console.log(this);
            return this.key
        }
    }
});

Demo: https://jsfiddle.net/BlackLabel/g03j9etv/2/