0

Need to display the different value on mouseover tooltip value other than x and y-axis value on highcharts.

Given data where I need to use graphValue to display on the chart and actualValue to display on the tooltip.

data = [
{'graphValue': 10, 'actualValue': 10 },
{'graphValue': 20, 'actualValue': 20 },
{'graphValue': 0, 'actualValue': -15 },
{'graphValue': 10, 'actualValue': 10 },
{'graphValue': 0, 'actualValue': -20 },
{'graphValue': 10, 'actualValue': 10 },
{'graphValue': 0, 'actualValue': -20 },
{'graphValue': 15, 'actualValue': 15 }
]

please let me know how to achieve this. Thank you.

demo: https://jsfiddle.net/52jr6p9z/

Arun Kumar M
  • 1,633
  • 1
  • 15
  • 26

2 Answers2

2

You can add custom point property to tooltip by pointFormat option:

tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.actualValue}</b><br/>'
},

Live demo: https://jsfiddle.net/BlackLabel/06jawfo1/

API Reference: https://api.highcharts.com/highcharts/tooltip.pointFormat

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
-1

I think you need to give each data its own object like this

Highcharts.chart('container', {
   tooltip: {
  formatter: function() {
  console.log(this);
    return 'The real value is <b>'+ this.key+ '</b>';
  }
},

    series: [{
        name: 'a',
        data: [{name:10,y:20},20,{name:'-10',y:0},10,0,10,0,15]
    }]

});

    });

https://jsfiddle.net/xqw7vyuf/

Chris
  • 256
  • 1
  • 10