stack total in shared tooltip
by jlbriggs
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width:350px;height:450px;margin:1em;"></div>
JavaScript
$('#container').highcharts({
chart: {
type:'bar'
},
title: { text: '' },
legend: {
align:'right',
layout:'vertical',
verticalAlign:'top',
x:15,
floating:true,
borderWidth:0,
shadow:false,
backgroundColor:'transparent',
itemStyle: {
fontWeight:'normal'
}
},
tooltip:{
borderRadius : 2,
borderWidth : 1,
borderColor : '#999',
shadow : false,
shared : true,
useHTML : true,
yDecimals : 0,
valueDecimals : 0,
headerFormat :
'<table class="tip"><caption>Group {point.key}</caption>'
+'<tbody>',
pointFormat :
'<tr><th style="color: {series.color}">{series.name}: </th>'
+ '<td style="text-align: right">${point.y}</td></tr>',
footerFormat :
'<tr><th>Total: </th>'
+'<td style="text-align:right"><b>${point.total}</b></td></tr>'
+'</tbody></table>'
},
plotOptions: {
series: {
stacking:'normal',
minPointLength:2
}
},
xAxis: {
lineWidth:.5,
lineColor:'#333',
tickWidth:.5,
tickLength:3,
tickColor:'#333',
categories:["01","02","03","04","05","07","09","17","18","19"],
title: {
rotation:0,
text:'Group',
margin:30,
style: {
color:'#000',
fontSize:'12px'
}
},
labels: {
style: {
color:'#000',
fontSize:'10px',
fontWeight:'bold'
}
}
},
yAxis: {
lineWidth:.5,
lineColor:'#333',
tickWidth:.5,
tickLength:3,
tickColor:'#333',
gridLineWidth:.5,
gridLineColor:'#eee',
title: {
text:'Dollars',
style: {
color:'#000',
fontSize:'12px'
}
},
labels:...