1

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

Meherzad
  • 8,433
  • 1
  • 30
  • 40
hohiep102
  • 83
  • 1
  • 9

3 Answers3

3

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,
phlppn
  • 406
  • 4
  • 8
1

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;

}

Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • thank for your help. I can do it now. But my category text is longer than 60px, i want to set it width as auto. But when i set auto, it does align right again :( – hohiep102 Mar 20 '13 at 01:46
  • If you set width as auto, then you cannot use text-align, cause object (label) has width of text, not "block". So you should define width as i.e 100 or bigger, which will be correct for length of your words. – Sebastian Bochan Mar 20 '13 at 08:36
0

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.

Jacob van Lingen
  • 8,989
  • 7
  • 48
  • 78