Highcharts - arearange - низкие и высокие значения во всплывающей подсказке

Question

У меня есть highrange чардж с двумя сериями.Я понимаю, как показывать название серии во всплывающей подсказке, но не могу понять, как показывать серию "low", "high" и "value" вроде:

SERIES_1 : 480 - 480
SERIES_2 : 483 - 485 - 'two'

$.each( this.points, function( k, point ) {
echo += point.series.name + ':LOW?? - HIGH?? - VALUE??';
});

Пример: http://jsfiddle.net/v6nxtfp5/

Полный код:

$('#chart').highcharts({
  chart: {
    type: 'arearange',
  },
  xAxis: {
    type : 'datetime',
    dateTimeLabelFormats: {
        day: '%d %m %Y'
    },
  },
  tooltip: {
      crosshairs: true,
      shared: true,
      formatter: function() {
        var echo = Highcharts.dateFormat('%d.%m.%Y', new Date(this.x))   +'<br>';

        $.each( this.points, function( k, point ) {
            echo += point.series.name + ':LOW?? - HIGH?? - VALUE??';
        });

        return  echo;
      },
  },
  series:
  [
    { 
      "name":"SERIES_1",
      "data":[
        {"x":1548979200000,"low":477,"high":477,"value":477},
        {"x":1551398400000,"low":480,"high":480,"value":480},
        {"x":1554076800000,"low":480,"high":480,"value":480}
      ]
    },
    { 
      "name":"SERIES_2",
      "data":[
        {"x":1546300800000,"low":478,"high":478,"value":478},
        {"x":1548979200000,"low":478,"high":478,"value":478}, 
        {"x":1551398400000,"low":478,"high":480,"value":"two"},                          
        {"x":1554076800000,"low":483,"high":485,"value":"two"}
      ]
    }
  ],
});

Answer 1

У вас есть доступ к самой точке с помощью point.point, после чего вы можете отформатировать всплывающую подсказку следующим образом:

tooltip: {
  crosshairs: true,
  shared: true,
  useHTML:true, // to use <br> tag 
  formatter: function() {
    var echo = Highcharts.dateFormat('%d.%m.%Y', new Date(this.x))   +'<br>';

    $.each( this.points, function( k, point ) {
        echo += point.series.name +'| Low : ' + point.point.low + ' | High : '+ point.point.high + '| Value :' + point.point.value + '<br>';
    });

    return  echo;
  },
}

Fiddle

PS:Скрипка, которую вы связали - это просто базовая демонстрация Jquery