Reputation: 1450
I have a chart as below.
$(function () {
$('#chartContainer').highcharts({
chart: {
renderTo: 'chartContainer',
type: 'column',
marginTop:50,
spacingBottom: 5,
marginBottom: 100
},
credits: {
enabled: false
},
title: {
text: 'Product health',
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minTickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Passrate'
},
},
legend: {
title: {
text: '<span style="font-size: 9px; color: #666; font-weight: normal">To toggle between different branches click on the branch names in the legend</span>',
style: {
fontStyle: 'italic'
}
},
layout: 'horizontal',
},
tooltip: {
formatter: function() {
return 'Branch: <b>'+ this.series.name +
'</b><br/>Date: '+ Highcharts.dateFormat('%e %b',this.x)+
'</b><br/>Pass rate: '+ this.y +'%';
}
},
plotOptions: {
spline: {
dataLabels: {
enabled: 'True'
},
enableMouseTracking: false
}
},
series: [{name: 'BranchX', data:[[Date.UTC(2013,9,3),88],[Date.UTC(2013,9,4),100],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),100],[Date.UTC(2013,9,7),100],[Date.UTC(2013,9,8),100],[Date.UTC(2013,9,9),100],]},{name: 'BranchY', data:[[Date.UTC(2013,9,3),75.27],[Date.UTC(2013,9,4),83.33],[Date.UTC(2013,9,5),100],[Date.UTC(2013,9,6),63.64],[Date.UTC(2013,9,7),98.31],[Date.UTC(2013,9,8),98.9],[Date.UTC(2013,9,9),64.71],]},]
});
});
This is a column graph showing the pass percentage.
I wanted to pass the numbers (passcount, total count) which were used to calculate the % vlaues, so that I can show them as tooltip. Is is possible?
Upvotes: 0
Views: 927
Reputation: 4776
yes this is possible and simple
pass the addl numbers in the series along with data access them from tool tip as shown below from the formatter
tooltip:{
formatter: function() {
this.point.options.passCount
this.point.options.total
}
}
series:[{
data: [{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
},{
x: timestamp,
y: value,
passCount: someVlaue,
totalCount: someValue
}]
}]
Upvotes: 1