wrapping category labels - Javascript highcharts

Javascript examples for highcharts:Chart Label

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Label

Description

wrapping category labels

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//w  w  w  .ja v a2 s .c  om
  $('#container').highcharts({
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Historic World Population by Region'
    },
    subtitle: {
      text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    xAxis: {
      categories: ['Holds regular team meetings for passing on information and sharing opinions',
        'Implements and strictly adheres to work safety rules',
        'Makes clear what he/she expects of me and sets clear goals',
        'Maintains focus in ambiguous and pressure situations',
        'Takes an interest in his/her workers and is attentive to their needs',
        'Initiates processes of improvement increased efficiency and cost reduction',
        'Promotes collaboration with other units',
        'Expresses recognition and appreciation for a job well done',
        'Allocates time teaching and coaching',
        'Gives me feedback on my performance',
        'Promotes my personal and professional development',
        'Creates enthusiasm among his subordinates',
        'Encourages people to take the initiative and widen their scope of responsibility',
        'Effectively delegates tasks and authority'
      ],
      labels: {
         useHTML:true,
        style: {
           textOverflow: 'none',
          color: 'red',
          fontSize: '13px'
        }
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Population (millions)',
        align: 'high'
      },
      labels: {
        overflow: 'justify'
      }
    },
    tooltip: {
      valueSuffix: ' millions'
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 80,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
    },
    credits: {
      enabled: false
    },
    series: [{
      name: 'Year 1800',
      data: [107, 31, 635, 203, 2]
    }, {
      name: 'Year 1900',
      data: [133, 156, 947, 408, 6]
    }, {
      name: 'Year 2012',
      data: [1052, 954, 4250, 740, 38]
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials