title: Highcharts : How to apply style to x-axis Labels?
body: <pre><code>[HighchartsImageContent_Text_Overlapping][1]
  
  
    [1]: http://i.stack.imgur.com/dUiUI.png
  
  I am using highcharts version 3.0.1 and jquery_min.js version 1.9.1
  
  I would like to acheive,
  1) 5px of padding on each side of the tick marks 2) content should wrap up to 3 lines, and then have an ellipses 3) if there is an ellipsis, show the full name on hover, using our light blue tool tips 4) if a single word wraps across lines, add a hyphen 5) as the display resolution increases, show more of the words
  
  Please post your solutions for resolving it..
  
  The code i am working on is 
  </code></pre>
  
  <p>/<em>Text Overlapping on xAxis example code</em>/</p>
  
  <pre><code>$(document).ready(function() {  
     var chart = {
        type: 'bar'
     };
     var title = {
        text: 'Historic World Population by Region'   
     };
     var subtitle = {
        text: 'Source: Wikipedia.org'  
     };
     var xAxis = {
        categories: ['Africaaaaaaaaaaaaaaaaaaaaa', 'Americaaaaaaaaaaaaaaaaaaaa', 'Asiaaaaaaaaaaaaaaaaaaaaaaaaa', 'Europeaaaaaaaaaaaaaaaaaaaa', 'Oceania'],
        title: {
           text: null
        },
        labels: {
  </code></pre>
  
  <p>/<em>I could see only the color rest of the changes are not reflected</em>/</p>
  
  <pre><code>        style: {
              "color":"green",
              "text-overflow": 'ellipsis',
              "line-height": "1.5em",
                          "height": "4.5em",
                          "white-space":"nowrap",
                           "word-wrap": "break-word",
                           "hyphens":"auto"
  
          }
        }
     };
     var yAxis = {
        min: 0,
        title: {
           text: 'Population (millions)',
           align: 'high'
        },
        labels: {
           overflow: 'justify'
        }
     };
     var tooltip = {
        valueSuffix: ' millions'
     };
     var plotOptions = {
        bar: {
           dataLabels: {
              enabled: true
           }
        },
        series: {
           stacking: 'normal'
        }
     };
     var legend = {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme &amp;&amp; Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
     };
     var credits = {
        enabled: false
     };
  
     var series= [{
           name: 'Year 1800',
              data: [107, 31, 635, 203, 2]
          }, {
              name: 'Year 1900',
              data: [133, 156, 947, 408, 6]
          }, {
              name: 'Year 2008',
              data: [973, 914, 4054, 732, 34]      
          }
     ];     
  
     var json = {};   
     json.chart = chart; 
     json.title = title;   
     json.subtitle = subtitle; 
     json.tooltip = tooltip;
     json.xAxis = xAxis;
     json.yAxis = yAxis;  
     json.series = series;
     json.plotOptions = plotOptions;
     json.legend = legend;
     json.credits = credits;
     $('#container').highcharts(json);
  
  });
  </code></pre>
  
  <p>I do tried formatter function,</p>
  
  <p>The errors i do receive is that,</p>
  
  <ol>
  <li>When i use xAxis.labels.formatter function, the initial web page load display axis values such as {0,0.5,1,1.5,2,2.5.....} instead of category name. </li>
  <li>I defined textOverflow:ellipsis in xAxis.labels.style but still the text overlaps in the display.</li>
  </ol>