Bullet Graph - multiple
Standard bullet graph example
by AbhishekRohan
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="height:auto;width:200px;"></div>
<div id="container2" style="height:auto;width:180px;"></div>
CSS
body {
font-family:helvetica, sans-serif;
font-size:.7em;
}
#container1, #container2, #container3{display:inline-block;}
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: {
type: 'column',
inverted: false,
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: ''
},
xAxis: {
tickLength: 0,
lineColor: '#EFAF19',
lineWidth: 0,
labels: {
style: {
fontWeight: 'bold'
}
}
},
yAxis: {
min: 0,
tickColor: '#EFAF19',
tickWidth: 0,
tickLength: 3,
gridLineWidth: 0,
endOnTick: true,
title: {
text: ''
},
},
tooltip: {
enabled: false
},
plotOptions: {
column: {
color: '#EFAF19',
shadow: false,
borderWidth: 0,
borderRadius : 0
},
scatter: {
marker: {
symbol: 'line',
lineWidth: 2,
radius: 16,
lineColor: '#EFAF19'
}
}
}
});
//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
spacingBottom: 0,
marginLeft: 70,
marginTop : 40
},
xAxis: {
categories: ['Lic & Sub QTD Bkgs']
},
yAxis: {
// max:300,
/* plotLines: [{
value: 0,
color: 'green',
dashStyle: 'line',
width: 2,
}], */
visible: false,
labels: {
y: 20,
style: {
fontSize: '0px'
}
},
},
series: [{
name: 'Measure',
pointWidth: 30,
color: "#FFFFFF",
borderWidth: 2,
borderColor: '#EFAF19',
pointPadding: 0.01,
pointPlacement: 0.1,
dataLabels: {
enabled: true,
align: 'right',
color: '#519DD1',
x: -55,
y: 12,
style:{
fontSize:15
},
...