Bullet Graph - multiple
Standard bullet graph example
by Torstein Hønsi
HTML
<div id="container1" style="height:36px;width:350px;"></div>
<div id="container2" style="height:36px;width:350px;"></div>
<div id="container3" style="height:36px;width:350px;"></div>
<div id="container4" style="height:36px;width:350px;"></div>
<div id="container5" style="height:36px;width:350px;"></div>
<script src="http://code.highcharts.com/2.3/highcharts.js"></script>
JavaScript
//-------------------------------------------------------
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
//-------------------------------------------------------
Highcharts.setOptions({
chart:{
defaultSeriesType:'bar',
marginTop:5,
marginRight:15,
marginBottom:10,
marginLeft:100,
borderWidth:0
},
credits:{enabled:false},
exporting:{enabled:false},
title:{text:''},
xAxis:{
tickLength:0,
lineColor:'#999',
lineWidth:1,
labels:{style:{fontWeight:'bold'}}
},
yAxis:{
min:0,
minPadding:0,
maxPadding:0,
tickColor:'#ccc',
tickWidth:1,
tickLength:3,
gridLineWidth:0,
endOnTick:true,
title:{text: ''},
labels:{
y:10,
style:{
fontSize:'8px'
},
formatter:function(){
if (this.isLast){
return this.value + ' %';
}
else{
return this.value;
}
}
}
},
legend:{enabled:false},
tooltip:{
enabled:true,
backgroundColor:'rgba(255, 255, 255, .85)',
borderWidth:0,
shadow:true,
style:{fontSize:'10px',padding:2},
formatter:function() {
return this.series.name + ": <strong>" + Highcharts.numberFormat(this.y,2) + "</strong>";
}
},
plotOptions:{
bar:{
color:'#000',
shadow:false,
borderWidth:0,
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:8,
lineColor:'#f00'
}
}
}
});
//-------------------------------------------------------
var chart1 = new...