Highcharts Demo

author(s): Kacper Madej

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/bullet.src.js"></script>
<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

CSS

#container1 {
    max-width: 800px;
    height: 115px;
    margin: 1em auto;
}

#container2, #container3 {
    max-width: 800px;
    height: 85px;
    margin: 1em auto;
}

.hc-cat-title {
  font-size: 13px;
  font-weight: bold;
}

JavaScript

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.target = function (x, y, w, h, options) {
		w = w;      
    return ['M', x + w/2 + options.width, y + h/2, 'L', x + w/2 - options.width, y + h/2, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.target = Highcharts.SVGRenderer.prototype.symbols.target;
}



Highcharts.setOptions({
    chart: {
        inverted: true,
        marginLeft: 135,
        type: 'bullet'
    },
    title: {
        text: null
    },
    legend: {
        enabled: false
    },
    yAxis: {
        gridLineWidth: 0
    },
    plotOptions: {
        series: {
            pointPadding: 0.25,
            borderWidth: 0,
            color: '#000',
            targetOptions: {
                width: '200%'
            }
        }
    },
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    }
});

Highcharts.chart('container1', {
    chart: {
        marginTop: 40
    },
    title: {
        text: '2017 YTD'
    },
    xAxis: {
        categories: ['<span class="hc-cat-title">Revenue</span><br/>U.S. $ (1,000s)']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 150,
            color: '#666'
        }, {
            from: 150,
            to: 225,
            color: '#999'
        }, {
            from: 225,
            to: 9e9,
            color: '#bbb'
        }],
        title: null
    },
    series: [{
        data: [{
            y: 275,
            target: 250
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

Highcharts.chart('container2', {
    xAxis: {
        categories: ['<span class="hc-cat-title">Profit</span><br/>%']
    },
    yAxis: {
        plotBands: [{
            from: 0,
            to: 20,
            color: '#666'
        }, {
            from: 20,
            to: 25,
            color: '#999'
        }, {
            from: 25,
        ...