title: Highcharts values in one column
body: <p>I would like to align the values shown on the right of the bar chart <em>(34.4, 21.8, 20.1 etc.)</em> to the far side of the chart as shown in the diagrams below:</p>
  
  <p>Original:
  <img src="https://i.stack.imgur.com/kSBo6.png" alt="Original Image"></p>
  
  <p>Desired Right Alignment of Values:
  <a href="https://i.stack.imgur.com/xRjZn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRjZn.jpg" alt="Desired"></a>
  </p>
  
  <p>I am using HighCharts, my code is:</p>
  
  <pre><code>$(function () {
      var chart;
      $(document).ready(function() {
          chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  type: 'column',
                  margin: [ 50, 50, 100, 80],
                  inverted: true
              },
              title: {
                  text: 'World\'s largest cities per 2008'
              },
              xAxis: {
                  categories: [
                      'Tokyo',
                      'Jakarta',
                      'New York',
                      'Seoul',
                      'Manila',
                      'Mumbai',
                      'Sao Paulo',
                      'Mexico City',
                      'Dehli',
                      'Osaka',
                      'Cairo',
                      'Kolkata',
                      'Los Angeles',
                      'Shanghai',
                      'Moscow',
                      'Beijing',
                      'Buenos Aires',
                      'Guangzhou',
                      'Shenzhen',
                      'Istanbul'
                  ],
                  labels: {
                      rotation: 0,
                      align: 'right',
                      style: {
                          fontSize: '13px',
                          fontFamily: 'Verdana, sans-serif'
                      }
                  }
              },
              yAxis: {
                  min: 0,
                  title: {
                      text: 'Population (millions)'
                  }
              },
              legend: {
                  enabled: false
              },
              tooltip: {
                  formatter: function() {
                      return '&lt;b&gt;'+ this.x +'&lt;/b&gt;&lt;br/&gt;'+
                          'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
                          ' millions';
                  }
              },
                  series: [{
                  name: 'Population',
                  data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
                      17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
                      11.7, 11.2],
                  dataLabels: {
                      enabled: true,
                      rotation: 0,
                      color: 'Black',
                      align: 'right',
                      //x: parseFloat(this.y) + 10,
                      x: 40,
                      y: 10,
                      formatter: function() {
                          return this.y;
                      },
                      style: {
                          fontSize: '13px',
                          fontFamily: 'Verdana, sans-serif'
                      }
                  }
              }]
          });
      });
  });
  </code></pre>
  
  <p>I have a <a href="https://jsfiddle.net/SL68H/1/" rel="nofollow noreferrer">jsFiddle here</a></p>