CODEWITHSUNDEEP
javascriptjqueryhtmlcsshighcharts
JeffB
JeffB

Reputation: 23

Highchart js bar graph label left alignment

I am trying to align all of the labels in this Highchart.js bar graph to the left so that they don't overlap the bar. However, Highchart.js seems to override the css that I add.

Does anyone know how to move these labels to the left of the bars and still have them aligned to the left? 

 xAxis: [{
        categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
        labels: {
            align: 'left', 
            overflow: 'justify',
            style: {
                    fontFamily: 'Arial',
                    fontSize: '20px',
                    color: '#333',
                    width: '350', 
                    left: '-20px', 
                    x: 0
               },
            formatter: function () {
                return '<div> <span>' + this.value + '</span><span style="font-weight: bold">' + " " + '</span> </div>';
            },
            useHTML: true
      }

http://jsfiddle.net/butlerjeff1/prcoo7vy/1/

Upvotes: 2

Views: 1811

Answers (2)

Chirag Gohil
Chirag Gohil

Reputation: 11

Use 'reserveSpace: true' in your xAxis label and remove formatter, style(width, x, left), useHTML.

This will help you to get your required output

http://jsfiddle.net/prcoo7vy/24/

xAxis: [{
        categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
        labels: {
            align: 'left', 
            overflow: 'justify',
            reserveSpace: true,
            style: {
                    fontFamily: 'Arial',
                    fontSize: '20px',
                    color: '#333'
               },

      }]

Upvotes: 1

Ella Ryan
Ella Ryan

Reputation: 1155

Setting align: 'left' in the labels object actually does the opposite to what you want. Try taking it out and the labels will pop back to the left of the axis.

Then, to tidy it up, add a text-align:right to your label formatter:

formatter: function () {
    return '<div style="text-align:right"> <span>' + this.value + '</span><span style="font-weight: bold">' + " " + '</span> </div>';
},

See updated fiddle

EDIT Sorry, I misread your post. You can keep align:left but then add x:-300 to the labels object which will nudge them back to the left side of the axis (I've chosen 300 to match the left margin you set but of course you can edit it to whatever you want)

New Fiddle Here

Upvotes: 1

Related Questions