CODEWITHSUNDEEP
highcharts
Michael
Michael

Reputation: 3356

Pull HighCharts data labels to the right

Currently, my Highcharts data labels are aligned to the bars:

The current chart

I would like to have the data labels aligned to the right border:

The desired chart

Any Ideas?

Uadate

Solved thanks to Pawel:

...
xAxis: [{
    categories: data[dimension].keys,
    gridLineWidth: 0,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0
}, {
    opposite: true,
    linkedTo: 0,
    categories: data[dimension].value,
    gridLineWidth: 0,
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0
}],
...

Upvotes: 1

Views: 899

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

For chart with fixed width set for dataLabels:

    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                align: 'left',   
                inside: true,
                x: 390
            }
        }
    },

Demo: http://jsfiddle.net/zf7te5ef/

If you have responsive chart, how about using separate xAxis for this? Like this:

    xAxis: [{
        categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania']
    }, {
        opposite: true,
        linkedTo: 0,
        categories: [107, 31, 635, 203, 2]
    }],

Demo: http://jsfiddle.net/zf7te5ef/1/

If this is not enough for you, then read this question.

Upvotes: 1

Related Questions