Highcharts angular.js custom tooltip - angularjs

Question

I am working on following example https://jsfiddle.net/neelkamal0666/6737c2q5/
Highcharts.chart('container', {
chart: {
type: 'column'
},
colors: ["rgb(241,198,64)", "#0091ea"],
title: {
text: ' ',
useHTML : true
},
xAxis: {
categories: ['Sowing', 'Activity', 'Application', 'Harvest']
},
yAxis: {
min: 0,
title :'',
stackLabels: {
enabled: false,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
credits: {
enabled: false
},
tooltip: {
shared: false,
backgroundColor: 'black',
borderColor: 'black',
borderRadius: 10,
color: 'white',
useHTML :true,
borderWidth: 3,
headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
pointFormat: '<b style="color: #fff;">{series.name}: {point.y}</b><br/><b style="color: #fff;">Total(%): {point.stackTotal}</b><br />',
/*formatter: function () {
var s = '<b>' + this.x + '</b>';
angular.forEach(this.points, function () {
s += '<br/>' + this.series.name + ': ' +
this.y + 'm';
});
return s;
} */
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: 'white',
style: {
textShadow: ''
}
}
},
series: {
pointWidth: 50, //width of the column bars irrespective of the chart size
additional : ["Sowing Area", "Activity", "Application", "Harvest"]
}
},
series: [{
name: 'Pending(%)',
data: [60, 40, 20, 80],
}, {
name: 'Completed(%)',
data: [40, 60, 80, 20],
}]
});
On tooltips I want to display different values
e.g if user clicks on sowing it will show
Pending : 60
Total : 100
Sowing Area : 4500 H
Plots Audited : 1200 H
And when user clicks on activities, it will show
Pending : 40,
Completed : 60,
Total : 100,
Total Activities : 200
Closed Activities : 125
When user clicks on Application, it will show
Pending :20,
Completed :80
Total :100,
Per acre usage : 200
And When user clicks on Harvest, it will show
Pending :80,
Completed :20
Total :100,
Volume Forcast : 100MT
I read the documentation of Highchart and went through lot of examples but still unable to figure out how can I achieve this.
Can someone help?

Answer 1

To change tooltip display you could add more info per data point and later access it and set it in tooltip's formatter.
Example: https://jsfiddle.net/woo70ers/
It might be easier to have all extra info in another array - easier too loop, whatever the additional into is.
Simple example: http://jsfiddle.net/am5ynoLg/
tooltip: {
formatter: function() {
var ret = 'x: ' + this.x + ', y: ' + this.y;
Highcharts.each(this.point.extraForTooltip, function(info) {
ret += '<br/>' + info[0] + ': ' + info[1];
});
return ret;
}
},
series: [{
data: [
[0, 1, [['opt1',123],['opt2','nice']] ],
[1, 2, [['opt2','bueno'],['opt3','ESP_#42']] ]
],
keys: ['x', 'y', 'extraForTooltip']
}]