Search code examples
javascripthighcharts

bullet chart configuration in highcharts


Given a bullet chart like the following using Highcharts:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bullet-graph

enter image description here

  • Is it possible to have more than one target value?
    We are trying to keep track of many targets against a particular bar.
  • How do you change the width of the bar? I can't seem to find the settings, there are settings for the target, but I can't find the right ones for the bar.

Here is the chart code:

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})'
    }
});

Solution

  • There is no such feature in Highcharts to add two targets, but by doing some tricky override of drawPoints bullet series prototype function, you can achieve the expected effect. Here is the example of using it: http://jsfiddle.net/BlackLabel/6wvbc1kb/

    After applying this override you should be able to set the minTarget field inside of your point object. Then the second target indicator will appear on the chart.