Bullet Graph - multiple v2.3
Standard bullet graph example
by Pranav Desai
HTML
<div id="container" style="height:250px;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, 'L', x + height, y];
};
//-------------------------------------------------------
Highcharts.setOptions({
chart: {
type: 'column',
inverted: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: '',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'white'
},
xAxis: {
tickLength: 0,
lineColor: '#999',
lineWidth: 1,
labels: {
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'white'
}
}
},
yAxis: {
max: 10,
allowDecimals: false,
tickColor: '#ccc',
tickWidth: 1,
tickLength: 3,
gridLineWidth: 0,
endOnTick: true,
title: {
text: ''
}
},
legend: {
enabled: false
},
plotOptions: {
column: {
shadow: false,
borderWidth: 0,
pointWidth: 30
},
scatter: {
marker: {
symbol: 'line',
lineWidth: 10,
radius: 18,
lineColor: 'black'
}
}
}
});
//-------------------------------------------------------
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['White List Score','Black List Score','Confidence Score']
},
yAxis: {},
plotOptions: {
column: {
colorByPoint: false,
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.textColor) || 'white',
...