CODEWITHSUNDEEP
javascripthighcharts
strandmyr
strandmyr

Reputation: 98

Highcharts grouped column labels

I have a highcharts grouped column chart with two columns for each value on the x axis. i would like to be able to add a label above each group with difference between the two in percent. I cant seem to find any way to reference the two columns in the formatter-option.

This is the section I'm having trouble with:

column: {
    dataLabels: {
        formatter: function()
        {                                
            return this.y;
        }
    }
}

Where this.y should be the difference.

This is how it is at this time http://jsfiddle.net/LLExL/4548/

All i want changed from this is a label above each of the two columns with a percent difference.

Upvotes: 1

Views: 1417

Answers (2)

dreyescat
dreyescat

Reputation: 13818

Inside the formatter callback you can use the series.chart.series[1].yData property to get the y values of the second column/series. yData is an array of all the y values. Then you can use the point.index property to get the corresponding point of the second column/series.

column: {
    dataLabels: {
        formatter: function()
        {   
            var firstColumnValue = this.y;
            var secondColumnValue = this.series.chart.series[1].yData[this.point.index];
            var yourCalculation = (firstColumnValue - secondColumnValue) / firstColumnValue * 100;
            return yourCalculation.toFixed(2) + '%';
        }
    }
}

Updated JSFiddle

Upvotes: 3

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

One possibility is to pre-calculate all the differences, and simply reference them in your formatter. For example, define your series in a variable, and loop over it to create a separate diffs array of the differences, like this:

var series = [{
    name: 'Omsetning',
    data: [
        // ...
    ]
    }
    // ...
];

var diffs = [];

for(i = 0; i < series[0].data.length; i++) {
    var v1 = series[0].data[i].y;
    var v2 = series[1].data[i].y;
    diffs.push( (Math.abs(v1-v2) / ((v1+v2) / 2)) * 100 );
}

$('#container').highcharts({
    plotOptions: {
        column: {
            dataLabels: {
                formatter: function()
                {                                
                    return Highcharts.numberFormat(diffs[this.x])+"%";
                }
            }
        }
    }
    series: series
    // ...
});

See this JSFiddle demonstration of how it looks.

Upvotes: 0

Related Questions