javascript - Highchart js bar graph label left alignment -

i trying align of labels in highchart.js bar graph left don't overlap bar. however, highchart.js seems override css add.

does know how move these labels left of bars , still have them aligned left?

 xaxis: [{         categories: ['injustice: gods among ★', '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/

setting align: 'left' in labels object opposite want. try taking out , labels pop left of axis.

then, tidy up, add text-align:right 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, misread post. can keep align:left add x:-300 labels object nudge them left side of axis (i've chosen 300 match left margin set of course can edit whatever want)

new fiddle here