Bullet Graph - single

Standard bullet graph example

by Orkun Ozen

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: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>

<p><a target="_top" href="http://jsfiddle.net/jlbriggs/UGs2E/">Multiple bullet charts in one chart</a></p>

CSS

body {
    font-family:helvetica, sans-serif;
    font-size:.7em;
}
p {
    margin:.5em 1em;
}

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:'bar',
        margin:[5,15,10,100]
    },
    credits:{enabled:false},
    exporting:{enabled:false},
    legend:{enabled:false},
    title:{text:''},
    xAxis:{
        tickLength:0,
        lineColor:'#FBB03F',
        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;
                }
            }
        }
    },
    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:'#1DB8B3',
            shadow:false,
            borderWidth:0,
        },
        scatter:{
            marker:{                
                symbol:'triangle-down',
                lineWidth:3,
                radius:4, //default
                lineColor:'#FBB03F',
                fillColor:'#FBB03F'
            }
        }
    }
});

//-------------------------------------------------------
var chart1 = new Highcharts.Chart({
   ...