Highcharts Demo

author(s): Torstein Hønsi

by Murali Kaliappan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

JavaScript

categories= [ "CYL-CHAMFERING",
         "CYL-FINALQAINSPECTION",
         "CYL-GLAZEDFIRING",
         "CYL-GLAZING",
         "CYL-GREEN VISUALINSPECTION",
         "CYL-GREENMACHINING",
         "CYL-METALLISEDFIRING",
         "CYL-METZCOATING",
         "CYL-PLATING",
         "CYL-TK3INSPECTION",
         "CYL-WASHLINE"];
categories1= [ "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-GLAZING",
         "CYL-PLATING",
         "CYL-GLAZING",
         "CYL-GLAZING"];
  var isOverlapped = false
  $.each(categories1,function(index,value){
  	if(value.length > 11) {
    	isOverlapped = true
      return false;
    }
  })  


Highcharts.chart('container', {

    chart: {
        renderTo: 'container',
        type: 'column'
    },
    xAxis: {
        categories: categories1,
         labels: {              
        	rotation: isOverlapped ? 315 : 0
      	}
    },
    plotOptions: {
        column: {           
            pointWidth : 30
        }
    },
    series: [
        {       
        data: [
         0.99,
         100,
         11.23,
         100,
         3.37,
         5.27,
         29.25,
         1.85,
         100,
         5.64,
         4.44
      ]}    
   ]
});