CODEWITHSUNDEEP
javascriptjsonhighcharts
Cédric Simon
Cédric Simon

Reputation: 91

Highcharts: display peak values

I would like to display difference between 2 points on my Highcharts graph. Only when it's a major "peak" difference.

Here's a "static" example :

enter image description here

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        series: [{
            data:   [560,500,476,453,356,{
                        y: 590,
                        dataLabels: {
                            enabled: true,
                            formatter: function () {return '+243';}
                        } 
                    },497,478,465,465,465,410,398]
        }]
    });
});

http://jsfiddle.net/vr1a61wy/

How can I compare all point values with the previous ?

For example, something like that (not "real code)

if(prevValue > 200) {
  displayDataLabel();
}
function displayDataLabel() {
   peak = this.datalabel - prev.datalabel;
   return peak;
}

The goal is to have a clean json file only with values and peaks calculated by javascript.

Is it possible ?

Upvotes: 3

Views: 621

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You can use the plotOptions.series.dataLabels.formatter to do this comparison. To do the comparison you will utilize this.x, this.y and this.series to look up the previous point.

An example formatter function would be (JSFiddle):

formatter: function() {
    if(this.x > 0 && this.y - this.series.data[this.x-1].y >= PEAKDIFF) {
        return "+" + (this.y - this.series.data[this.x-1].y);
    }
    return null;
}

Where PEAKDIFF is the value you want the difference to be before showing the label. If you want large negative drops to show as well you'd do the same with Math.abs.

Upvotes: 1

Related Questions