Bullet Charts

Multiple bullet charts in one plot

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:550px;height:400px;margin:1.5em 1em;"></div>

<script>
var d          = new Date();
var pointStart = d.getTime();

Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        },
        events:{
            load: function() {
                this.credits.element.onclick = function() {
                    window.open(
                      'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
                    );
                 }
            }
        }           
    },
    credits: {
        text : 'http://stackoverflow.com/users/1011544/jlbriggs',
        href : 'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
    },
    title: {
        text:'Test Chart Title',
        align:'left',
        margin:10,
        x: 50,
        style: {
 ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

JavaScript

//-------------------------------------------------------
//set a 'line' marker type for use in bullet charts 
Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};
//-------------------------------------------------------

var chart;
var titleText    = 'Bullet Chart Test';
var subTitleText = 'Multiple Bullets in one plot';

$(function() {
    $('#container').highcharts({
        chart: { 
        	type: 'bar', 
          margin:[75,10,75,150] 
        },
        title: { text: titleText },
        subtitle: { text: subTitleText },
        legend: { enabled : true },
        tooltip: {
        	shared: true,
         	crosshairs: true
        },
        xAxis: {
          tickLength: 100,
          tickColor: '#eee',
          gridLineWidth: 1,
          gridLineColor: '#eee',
          title: { text: null },
          labels: {
              style: {
                  fontWeight: 'bold',
                  fontSize: '1em'
              }
          },
          lineColor: 'rgba(0,0,0,.75)',
          lineWidth: 0.5,
          categories: ['Measure 1','Measure 2','Measure 3','Measure 4','Measure 5']
      },
      yAxis:{
      		max:115,
          allowDecimals: false,
          tickColor: 'rgba(0,0,0,.75)',
          tickWidth: 0.5,
          tickLength: 3,
          lineColor: 'rgba(0,0,0,.75)',
          lineWidth: 0.5,
          gridLineWidth: 1,
          gridLineColor: 'rgba(255,255,255,.15)',
          title: { text: '' },
          endOnTick: false,
          plotLines: [{
              value: 105,
              width: 1,
              color: '#eee'
          }],
          labels: {
          	formatter: function() {
            	return this.isLast ? this.value+'%' : this.value;
            }
          }
      },
     ...