CODEWITHSUNDEEP
highcharts
jessegavin
jessegavin

Reputation: 75650

How can I set the alignment for individual axis labels in highcharts?

I would like the ability to set a different text alignment for the first and last labels on my x axis. For all the labels in between, I would like the labels to be center aligned.

|______________________________________________________|
|          |          |          |          |          |
Jun 2    Jun 3      Jun 4      Jun 5      Jun 6    Jun 7

In the example above

From what I can see in the documentation I am limited to a single align setting which applies to all tick labels.

Has anyone found a workaround for this? Am I missing something?

Upvotes: 2

Views: 752

Answers (2)

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

You can set overflow parameter as 'justify'

labels:{
    overflow: 'justify'
}

Example: http://jsfiddle.net/sbochan/0aq6o5vv/1/

Upvotes: 2

Mark
Mark

Reputation: 108537

Can't find anything in the API that'll let you customize to that level, so here's my hack:

   chart: {
        events: {
            load: function(){
                var fL = this.xAxis[0].labelGroup.element.firstChild;
                var lL = this.xAxis[0].labelGroup.element.lastChild;
                fL.setAttribute('x', parseFloat(fL.getAttribute('x')) + fL.getBBox().width / 2);
                lL.setAttribute('x', parseFloat(lL.getAttribute('x')) - lL.getBBox().width / 2);
            }
        }
    },

Fiddle here.

Won't work with the VML fallback though.

Upvotes: 0

Related Questions