CODEWITHSUNDEEP
highchartsbar-chart
Gautham G
Gautham G

Reputation: 3

Want to make the Highcharts Bar Chart data labels appear on the far right in the chart

I am looking for the desired output like so:

datalabels in the far right

series.dataLabels.align: left/right` isn't cutting it. It only makes it appear just after the blue rectangle of each bar and not on the far right, which is not what I want. I have also looked at the highcharts api a little bit and I was not able to find a chart option that gets the job done. Thanks in advance.

 My current chart options:
 var options = {
            chart: {
                renderTo: 'container',
                type: 'bar',
            },
            credits: {
                enabled: false
            },
            colors: ['#024a7a'],
            title:{
                text:null
            },
            plotOptions: {
                bar:    {
                animation: false
                },
                series: {
                    showInLegend: false,
                    states: {
                        hover:  {
                            enabled:false
                        }
                    }
                }
            },
            tooltip: { 
            enabled: false 
            },
            xAxis: [{
                categories: ['SAC 1', 'SAC 2', 'SAC 3'],
                lineWidth: 0,
                minorGridLineWidth: 0,
                lineColor: 'transparent',
                minorTickLength: 0,
                tickLength: 0
            }],
            yAxis: [{
                gridLineWidth: 0,
                labels: {
                    enabled: false
                },
                minorGridLineWidth: 0,
                title: {
                    text: null
                }
            }],
            series: [{
                data: [10, 5, 15],
                dataLabels: {
                    align: 'left',
                    enabled: true
                }
            }]
        };
        var chart = new Highcharts.Chart(options);
        });

Upvotes: 0

Views: 999

Answers (1)

daniel_s
daniel_s

Reputation: 3722

One of the ways to achieve that effect is passing specific xAxis and yAxis configuration objects, which contains few parameters:

xAxis: [{
        opposite: true,
    type: 'category',
        labels: {
            formatter: function() {
            return this.chart.series[0].processedYData[this.pos] + ' %'
        },
    },
    lineWidth: 0,
    minorTickWidth: 1,
    tickWidth: 0
},

yAxis: {
        title: {
            enabled: false
    },
    labels: {
            enabled: false
    },
    gridLineWidth: 0,
    max: 100
},

Configuration above fills labels by the series data values, so you should prepare series array similar like below:

series: [{
    data: [31, 15, 9, 5]
}],

Lets look for this JSFiddle: http://jsfiddle.net/daniel_s/yp9h6b7m/

Best regards!

Upvotes: 7

Related Questions