Slavi Slavi - 3 years ago 177
Javascript Question

Y value minus 1 in tooltip HighCharts

I am struggling finding a way to return the previous Y value in the chart on the current Y value's tooltip. The idea is that I want to perform the action of "this.y - this.y(-1)" (getting that this.(y-1)) value and find the difference between the current and the one before that. Ideally, this will be in the tooltip for each of the values in the chart

My code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="container" style="height: 500px; min-width: 310px"></div>

<script type="text/javascript">
$(function () {
$.get("data.csv", function (csv) {
$('#container').highcharts('StockChart', {
title: {
text: 'Testing HighCharts'
},
data: {
csv: csv
},
rangeSelector: {
selected: 1
},
tooltip: {
formatter:function(){
return '<b>Date:</b> ' + Highcharts.dateFormat('%B %e %Y', this.x) + '<br>' + '<b>Amount:</b> ' + this.y + '<br>';
}
},
plotOptions: {
series: {
marker: {
enabled: true,
fillColor: 'FFFFFF',
radius: 4
},
allowPointSelect: true,
color: '#CC0000',
width: 3
}
}
});
});
});
</script>


</head>
</html>

Answer Source

You need to use index and series properties of this.point object inside the tooltip formatter.

tooltip: {
    formatter:function(){
        var diffText = '',
            i = this.point.index;

        if (i > 0) {
            diffText = '<br><b>Difference: </b>' + (this.y - this.point.series.data[i-1].y);
        }

        return '<b>Date:</b> ' + Highcharts.dateFormat('%B %e %Y', this.x) + '<br>' + '<b>Amount:</b> ' + this.y + '<br>' + diffText;
    }
},

Here is the demo: https://jsfiddle.net/alex_ua/7u80r0c3/2/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download