Highcharts Demo

author(s): Jaskey

by Geo George

HTML

<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/modules/exporting.js"></script>
<div id="container" ></div>

CSS

/* .highcharts-axis-labels span{ 
  word-break:break-all!important;
  width:50px!important;
  white-space:normal!important;
} */

JavaScript

$(function () {
		var chartcategories= [
    'Writing clearly and effectively',
    'Solving numerical problems',
    'Speaking clearly and effectively',
    'Breaking down information into basic elements',
    'Using computer technology',
    'Working well with others',
    'Acquiring new skills or knowledge on your own',
    'Think analytically and logically',
    ' Creativity'];
    
    var chartheight=0;
    
    var textlength=0;
    
    for(var i=0;i<chartcategories.length ;i++){
    	if(chartcategories[i].length > textlength){
      	textlength=chartcategories[i].length;
      }
    }
    chartheight= 250+ (textlength * 2); 
    
    $('#container').highcharts({
        chart: {
            type: 'column',
            height:chartheight
        },
        xAxis: {
            categories: chartcategories ,
            labels: {
                useHTML:true,//set to true
                style:{
                    //width:'50px',
                   // whiteSpace:'normal'//set to normal
                },
                step: 1,
                formatter: function () {//use formatter
                    return '<span align="center" style="display:inline-block;word-wrap: break-word;word-break: break-all;width:70px;white-space: normal;overflow:hidden">' + this.value + '</span>';
                }
            },

        },
      
        plotOptions: {
            series: {
                //pointWidth: 30
            }
        },

        series: [{
            data: [12,66,32,78,23,56,12,78,34,89]
        }]
    });
});