Highchart bar chart: X-Axis label is cut off even when there is space between chart and label

Question

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?

JSFiddle Example: http://jsfiddle.net/nbb9us69/1/

                            $(function() {
                              function draw() {
                                if ($('div[data-sectionId="7488"] .chart .highcharts-container').length > 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();
                              });
                            });

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="section contentSection breakdown breakdown1 region" data-sectionId="7488">
  <h2>Sector Allocation - as at 31/08/2015</h2>
  <div class="chart">&nbsp;</div>
  <div class="clear"></div>
</div>

Screen shot with corrupted labels & empty space on the label.

Answer 1

Use textOverflow: none to avoid ellipsis and use whiteSpace: 'nowrap' to avoid line break . see the fiddle Here

                                labels: {   align: 'left',
                                            x: 0,                                               
                                            style: {
                                                fontFamily: 'Arial',
                                                fontSize: '8pt',
                                                color: '#000000',
                                                textOverflow:'none', //I changed these two lines
                                                whiteSpace: 'nowrap'

                                            }
                                        },