Primm
Primm

Reputation: 2018

HighCharts - Bar Chart - Labels like Pie Chart?

I was wondering if anyone was able to create a bar chart with labels like the pie chart? I need to be able to create the labels outside and create that line to them. Just like the pie chart does here:

http://www.highcharts.com/demo/pie-basic

I have a basic bar chart (using it as a progress bar). I need to create the labels on the outside because the sections might get really small. Here is my JSFiddle: http://jsfiddle.net/rLYj4/5

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: '<b>Total</b><br/><b>$100.00</b>'
        },
        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            labels: {
                enabled: false
            },
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            gridLineColor: 'transparent',
            startOnTick: false
        },
        yAxis: {
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            gridLineColor: 'transparent',
            labels: {
                enabled: false
            },
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function() {
                return this.series.name +': '+ this.y +'<br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: 'white'
                }
            }
        },
        series: [{
            name: 'Category 1',
            data: [50.00]
        }, {
            name: 'Category 2',
            data: [25.00]
        }, {
            name: 'Category 3',
            data: [12.50]
        }, {
            name: 'Category 4',
            data: [12.50]
        }]
    });
});

Does anyone know how to accomplish this?

Thanks, Joshua

Upvotes: 0

Views: 498

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

Unfortuantely this option is not supported, but you can post your suggestion on the website: http://highcharts.uservoice.com/forums/55896-general

Upvotes: 0

Related Questions