CODEWITHSUNDEEP
highcharts
Vv.
Vv.

Reputation: 89

Highcharts - arearange - low and high values in tooltip

I have highcharts arearange with two series. I understand, how show series name in tooltip, but I can't understand how show series "low", "high" and "value" like:

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

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

Example: http://jsfiddle.net/v6nxtfp5/

Full code:

$('#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"}
      ]
    }
  ],
});

Upvotes: 0

Views: 1048

Answers (1)

Core972
Core972

Reputation: 4114

You have access to the point itself with point.point then you can format the tooltip like that :

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: the the fiddle you linked is just the basic Jquery demo

Upvotes: 1

Related Questions