breq breq - 4 months ago 17
jQuery Question

Highcharts - Add difference between y-points

How I can add difference between two points?
For example for 'monday' Jane has 1, John has 3 points so John should have info like "(-70%)", in Wednesday John has 3, Jane has 4 so it should be "(+125%)"
Info should be at line which is nearest right side.

enter image description here
jsfiddle

$(function () {
$('#container').highcharts({
chart: {
type: 'area',
inverted: true
},
title: {
text: 'Average fruit consumption during one week'
},
subtitle: {
style: {
position: 'absolute',
right: '0px',
bottom: '10px'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Number of units'
},
labels: {
formatter: function() {
return this.value;
}
},
min: 0
},
plotOptions: {
area: {
fillOpacity: 0.5
}
},
series: [{
name: 'John',
data: [3, 4, 3, 5, 4, 10, 12]
}, {
name: 'Jane',
data: [1, 3, 4, 3, 3, 5, 4]
}]
});
});

Answer

I don't understand calculation: - Jane = 1, - John = 3, so label = (-70%)

However, this is way to get dataLabel for Jane and John:

                formatter: function(){
                    var secondY = this.series.chart.series[1].yData[this.point.x],
                        firstY = this.y;
                    return this.y;    
                }

jsFiddle: http://jsfiddle.net/7gvuA/

Comments