CODEWITHSUNDEEP
highchartsalignmentaxiscategories
hohiep102
hohiep102

Reputation: 93

Align left multi category xaxis highchart

Image 1

enter image description here

Image 2

enter image description here

I want to align left the label but when i do this, the label a stack on other like Image 2.

Please help me

Upvotes: 1

Views: 2946

Answers (3)

phlppn
phlppn

Reputation: 416

This one works without fixed width:

.highcharts-axis-labels span {
  left: 0 !important;
}

Since it uses the width of the biggest label and moves the smaller once by raising the "left" value, you can prevent that by setting it fix to 0. So no need of fix width or "align: left".

Update:

Labels "useHTML" setting must be set to true to work!

xAxis: {
  labels: {
    useHTML: true,

Upvotes: 3

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You can also set useHTML as true, use formatter for labels and then use CSS styles.

http://api.highcharts.com/highcharts#xAxis.labels.useHTML http://api.highcharts.com/highcharts#xAxis.labels.formatter

EDIT:

http://jsfiddle.net/2QREQ/3/

xAxis: {

            labels: {
                //align: 'center'
                useHTML:true,
                formatter:function(){

                    return '<div class="label">'+this.value+'</div>';
                }
            }
        },

CSS

.label {
text-align:left;
width:60px;

}

Upvotes: 1

Jacob van Lingen
Jacob van Lingen

Reputation: 9537

Give the green and the blue bar a container div/span. Then apply for both of the label and the container span/div a 'display: inline-block' css.

By doing so you would force the bars to 'give space' for the label.

Upvotes: 0

Related Questions