CODEWITHSUNDEEP
jquerychartshighcharts
JDW
JDW

Reputation: 69

jQuery - HighCharts Labels outside Series (Bar Chart)

$(function () {
$('#container').highcharts({
        chart: {
            type: 'bar',
            backgroundColor: null,
            width: 360
        },
        title: {
            text: null,
            style: {
                display: 'none'
            }
        },
        subtitle: {
            text: null,
            style: {
                display: 'none'
            }
        },
        credits: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        xAxis: {
            categories: ['Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5', 'Cat 6', 'Cat 7', 'Cat 8', 'Cat 9', 'Cat 10'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            max: 10,
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            title: {
                text: null
            },
            labels: {
                enabled: false
            }
        },
        tooltip: {
            enabled: false
        },  
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            },
            series: {
                dataLabels: {
                    crop: false,
                    enabled: true,
                    y: -2,
                    inside: false
                }
            }
        },
        series: [{
            showInLegend: false,
            name: '',
            color: '#CCC',
            data: [1, 2, 3, 9.4, 5, 6, 8, 9, 9, 9.5]

    }]
});
});

jsfiddle: http://jsfiddle.net/uNrW2/1/

I can't seem to get the labels of the series' data to always appear on the RIGHT of the bar. I have gone through all the API and I can't seem to find an option to stop the text from getting moved into the bar.

Does anyone have any idea why this is happening? Thank you very much for your time!

Upvotes: 3

Views: 7886

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

You've missed one option in the API called plotOptions.series.dataLabels.overflow (API):

overflow: String

How to handle data labels that flow outside the plot area. The default is justify, which aligns them inside the plot area. For columns and bars, this means it will be moved inside the bar. To display data labels outside the plot area, set crop to false and overflow to "none". Defaults to justify.

In other words, you need to combine crop and overflow, like this (updated JSFiddle):

plotOptions: {
    series: {
        dataLabels: {
            enabled: true,
            crop: false,
            overflow: 'none'
        }
    }
}

Upvotes: 7

Related Questions