Bullet Graph - multiple
Standard bullet graph example
by markmsmith
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<script src="//code.highcharts.com/2.2.4/highcharts.js"></script>
<div id="container1" style="height:36px;width:500px;"></div>
<div id="container3" style="height:36px;width:500px;"></div>
<div id="container2" style="height:36px;width:500px;"></div>
<div id="container4" style="height:36px;width:500px;"></div>
<div id="container5" style="height:36px;width:500px;"></div>
<div id="container6" style="height:36px;width:500px;"></div>
JavaScript
//-------------------------------------------------------
$.extend(Highcharts.Renderer.prototype.symbols, {
line: function(x, y, r) {
return ['M',x-(r-20),y,'L',x+r,y];
}
});
//-------------------------------------------------------
Highcharts.setOptions({
chart:{
defaultSeriesType:'bar',
marginTop:5,
marginRight:15,
marginBottom:10,
marginLeft:180,
borderWidth:0
},
credits:{enabled:false},
exporting:{enabled:false},
title:{text:''},
xAxis:{
tickLength:0,
lineColor:'#999',
lineWidth:1,
labels:{style:{fontWeight:'bold'}}
},
yAxis:{
min:0,
max:65000,
endOnTick:false,
minPadding:0,
maxPadding:0,
tickColor:'#ccc',
tickWidth:1,
tickLength:3,
gridLineWidth:0,
endOnTick:true,
title:{text: ''},
labels:{
y:10,
style:{
fontSize:'8px'
}
}
},
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:2,
radius:10,
lineColor:'#000'
}
}
}
});
//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
chart:{renderTo:'container1'},
xAxis:{categories:['Sales']},
yAxis:{
endOnTick:false,
labels:{y:10,style:{fontSize:'8px'}},
...