Axis Label Alignment in highcharts

Question

I have a problem setting the alignment of the xAxis labels so that it looks alright. the position of first and last labels are not aligned with the Axis extremes but rather has moved outside of the chart area itself.

I have tried many thing such as setting the overflow to Justify and also tried to position the Labels but in highcharts one can apply a setting such as alignment or x position to all the labels. If only there was a way to actually align the first and last label separately one to the left the other to the right, it would be perfect. Here is the JSfiddle:

labels: {
            step: 11,
            maxStaggerLines : 1
        }

jsfiddle code

PS. :To show only first and last label, I use steps.

Any suggestions?

Answer 1

In general you can use overflow: 'justify' to handle overflowing labels on the x axis as shown in this example (from the github repo https://github.com/highslide-software/highcharts.com )

 $(function() { $('#container').highcharts({ chart: { plotBorderWidth: 1 }, title: { text: null }, xAxis: [{ type: 'datetime', labels: { overflow: 'justify' }, title: { text: 'Justified labels' } }, { type: 'datetime', linkedTo: 0, opposite: true, title: { text: 'Non-justified labels' } }], yAxis: { title: { text: null }, labels: { enabled: false } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6], pointStart: (new Date()).setUTCHours(0), pointInterval: 24 * 3600 * 1000, showInLegend: false }] }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 300px; width: 500px"></div> 

The issue here is that overflow: 'justify' doesn't seem to work when combined with the step directive (I tried to add step: 6 to the above fiddle and had the same problem that you have). I would use a workaround by creating a number of labels that is equal to the number of steps +1 (or number of steps=number of labels minus 1).

Another solution that works in all cases is to add rotation: 90 as shown here .

 $(function() { $('#container').highcharts({ chart: {}, xAxis: { categories: ['Jan 2 2013', 'Jan 3 2013', 'Jan 4 2013', 'Jan 5 2013', 'Jan 6 2013', 'Jan 7 2013', 'Jan 8 2013', 'Jan 9 2013', 'Jan 10 2013', 'Jan 11 2013', 'Jan 12 2013', 'Jan 13 2013' ], labels: { step: 11, maxStaggerLines: 1, rotation: 90 } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 234.4, 134.5, 160.4, 134.6, 154.3] }] }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <div id="container" style="height: 400px; width: 500px"></div> 

Answer 2

There is a couple of ways how you can resolve it:

• set marginRight higher, for example to 25px
• set width for labels, so they will be wrapped

And in general, I would advice to use datetime xAxis, when using data based on a dates. Categories are created rather to handle.. categories, like fruits, cars, etc. Example, I would advice to use: http://jsfiddle.net/32cWY/

Answer 3

 chart: {
         type: 'column',
         marginRight:110
        },