Search code examples
highchartsalignmentcategorieslabel

How to align category labels on xAxes in Highcharts.js


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'
            }
        }
    });
});

Solution

  • 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',
        }