CODEWITHSUNDEEP
javascripthighcharts
Andre Pena
Andre Pena

Reputation: 59336

HighCharts: How to put the xAxis category text inside the chart

I'm working with Highcharts and I'm not being able to accomplish something. Here is what I want:

enter image description here

As you can see, the text for each bar is on top of the bar.

Here is the version that I've been working on:

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'APPROVED SPEND TO DATE FOR FISCAL YEAR 2013: $17,360,612'
            },
            xAxis: {
                categories: ['Intellectual Property', 'Antitrust/Competition'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Approved spend',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ' dollars'
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: false
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -40,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Year 2013',
                data: [6000123, 3743653]
            }]
        });
    });

JSFiddle: http://jsfiddle.net/WcKvz/1/

As you can see, I'm only having the text in the left side of the bar and I can't get it right.

Any ideas? Thank you

Upvotes: 1

Views: 2402

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

The only way I've seen this work is with stackedLabels. You can use them even if you aren't using stacked bars since you only have one series.

        ...
        plotOptions: {
            bar: {
                stacking: 'normal'
            }
        },
        yAxis: {
            stackLabels: {
                formatter: function() {
                    return this.axis.chart.xAxis[0].categories[this.x] + ': $' + this.total;
                },
                enabled: true,           
                verticalAlign: 'top',     
                align: 'left',
                y: -5
            }, 
         ...

http://jsfiddle.net/NVypa/

Upvotes: 2

Related Questions