How to align category labels on xAxes in Highcharts.js

2
votes

I'm new to Highcharts.js and what I'm trying to do is a column chart with categories label visible on x-Axis. I've no problem with setting my highcharts object to show categories as label, but I still can't align those labels to the right instead of have them centered between two tick marks. The property 'align' applied to xAxis labels doesn't work if what I see as labels on xAxes are my categories. Is there a way to do that? Here is my chart:

$(function () { 
    $('#histogram').highcharts({
        chart: {
            type: 'column'
        },
        series: [{
            data: [5,14,17,9,0,1,1,1,0,1,0,0,0]
        }],
        xAxis: {
            categories: [0.7,0.85,1,1.2,1.3,1.5,1.6,1.8,1.9,2.1,2.2,2.4],
            labels: {
                align:'right',
                rotation:'-45'
            }
        }
    });
});
1
highchartsalignmentcategorieslabels
Maybe you need this? api.highcharts.com/highcharts#xAxis.plotLines.label – aet
Thank you aet for your response. I'm afraid it doesn't solve my problem. I just need to set a horizontal alignment for the xAxis labels (that in my case are categories). I need the labels to stay aligned to the tickmarks and not between them. – Andrea
Look at tickmarkPlacement:'on' : api.highcharts.com/highcharts#xAxis.tickmarkPlacement – jlbriggs

1 Answers

5
votes

Check the following option tickmarkPlacement : http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

tickmarkPlacement: String For categorized axes only. If on the tick mark is placed in the center of the category, if between the tick mark is placed between categories. The default is between if the tickInterval is 1, else on. Defaults to null.

Check the code jsfiddle :

    xAxis: {
        categories: [0.7,0.85,1,1.2,1.3,1.5,1.6,1.8,1.9,2.1,2.2,2.4],
        labels: {
            align:'right',
            rotation:'-45'
        },
         tickmarkPlacement:'on',
    }