title: Highchart bar chart: X-Axis label is cut off even when there is space between chart and label
body: <p>Highchart's bar chart xaxis labels gets cut down and adds .. when the chart width is reduced. This happens even when there is space between the chart and the left most label. Does any one have any idea on how to control the white space and make all the characters of the label generate?</p>
  
  <p>JSFiddle Example: <a href="http://jsfiddle.net/nbb9us69/1/" rel="nofollow noreferrer">http://jsfiddle.net/nbb9us69/1/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>                            $(function() {
                                function draw() {
                                  if ($('div[data-sectionId="7488"] .chart .highcharts-container').length &gt; 0) return;
                                  $('div[data-sectionId="7488"] .chart').highcharts({
                                    chart: {
                                      style: {
                                        fontFamily: 'Arial',
                                        fontSize: '8pt'
                                      },
                                      height: 240,
                                      backgroundColor: 'rgba(255,255,255,0)',
                                      spacing: [0, 5, 5, 0],
                                      type: 'bar',
                                    },
                                    xAxis: [{
                                      categories: ['21.5%', '18.4%', '15.1%', '14.4%', '9.2%', '8.5%', '7.0%', '4.9%', '1.1%'],
                                      labels: {
                                        padding: 50,
                                        style: {
                                          fontFamily: 'Arial',
                                          fontSize: '8pt',
                                          color: '#000000'
                                        }
                                      },
                                      tickLength: 0
                                    }, {
                                      categories: ['Financials', 'Energy', 'Consumer Staples', 'Information Technology', 'Materials', 'Consumer Discretionary', 'Telecommunications', 'Industrials', 'Health Care'],
                                      labels: {
                                        padding: -20,
                                        align: 'left',
                                        x: 0,
                                        step: 1,
                                        style: {
                                          fontFamily: 'Arial',
                                          fontSize: '8pt',
                                          color: '#000000'
                                        }
                                      },
                                      offset: 250,
                                      tickLength: 0
                                    }],
                                    yAxis: {
                                      maxPadding: 0,
                                      gridLineColor: 'null',
                                      title: {
                                        text: ''
                                      },
                                      labels: {
                                        style: {
                                          fontFamily: 'Arial',
                                          fontSize: '8pt',
                                          color: '#7f7f7f'
                                        },
                                        overflow: 'justify',
                                        format: ' ',
                                        y: 8
                                      }
                                    },
                                    plotOptions: {
                                      bar: {
                                        animation: false,
                                        color: '#0088CE',
                                        dataLabels: {
                                          enabled: false,
  
                                          allowOverlap: true
                                        },
                                        states: {
                                          hover: {
                                            enabled: false
                                          }
                                        }
                                      },
                                      series: {
                                        pointWidth: 20,
                                        stacking: 'normal',
                                        pointPadding: 0.1,
                                        groupPadding: 0
                                      }
                                    },
                                    series: [{
                                      data: [21.5, 18.4, 15.1, 14.4, 9.2, 8.5, 7.0, 4.9, 1.1]
                                    }, {
                                      xAxis: 1,
                                      data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
                                    }],
                                    title: {
                                      text: ''
                                    },
                                    credits: {
                                      enabled: false
                                    },
                                    legend: {
                                      enabled: false
                                    },
                                    tooltip: {
                                      enabled: false
                                    }
                                  });
                                };
                                if ($('div[data-sectionId="7488"]').closest('.tab').length == 0) {
                                  draw();
                                  return;
                                }
                                var containingTab = $('div[data-sectionId="7488"]').closest('.tab');
                                var containingTabs = $(containingTab).closest('.tabs');
                                containingTabs.tabs('onChange', containingTab.index(), function() {
                                  draw();
                                });
                              });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="section contentSection breakdown breakdown1 region" data-sectionId="7488"&gt;
    &lt;h2&gt;Sector Allocation - as at 31/08/2015&lt;/h2&gt;
    &lt;div class="chart"&gt;&amp;nbsp;&lt;/div&gt;
    &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Screen shot with corrupted labels &amp; empty space on the label.
  <a href="https://i.stack.imgur.com/1gfmY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1gfmY.png" alt="enter image description here"></a></p>