javascripthighchartsbullet-chart

HighCharts Bullet Chart label show on top Possible?


I want to show the label of this bullet chart in the top of the chart instead left side.Is it possible? Here is the code,

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,
            to: 100,
            color: '#bbb'
        }],
        labels: {
            format: '{value}%'
        },
        title: null
    },
    series: [{
        data: [{
            y: 22,
            target: 27
        }]
    }],
    tooltip: {
        pointFormat: '<b>{point.y}</b> (with target at {point.target})'
    }
});

Here is the bullet chart. I want to show my Label Profit to the top of the chart.

enter image description here you can also see jsfiddle: Bullet chart


Solution

  • You can use the dataLabels property with the right options:

    series: [{
        data: [{
            dataLabels: {
                enabled: true,
                format: '<span class="hc-cat-title">Profit</span>',
                align: 'left',
                y: 40,
                inside: true
            },
            y: 275,
            target: 250
        }]
    }]
    

    Live demo: http://jsfiddle.net/BlackLabel/rxkt43o7/

    API Reference: https://api.highcharts.com/highcharts/series.column.data.dataLabels