overlapping category labels in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

overlapping category labels in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <script src="https://code.jquery.com/jquery-1.9.0.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
   </head> 
   <body> 
      <div id="container" style="height: 500px; min-width: 500px"></div> 
      <script>
$(document).ready(function() {
  var data =[],//from ww  w . j av  a  2s  . c om
      names =[ 'Ari','Bjartur','Bogi','Bragi','D?njal','D?vur','Eli','Emil','Fr??i','H?kun','Hanus','Hjalti','??sakur',                'Johan','J?han','Julian','Kristian','Leon','Levi','Magnus','Martin','Mattias','Mikkjal,N?a,?li,Pauli','Petur','R?i','Sveinur','Teitur'];
  for (var i =0; i < names.length; i++){
    data.push(Math.random()*100);
  };
  var chart= new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    xAxis: {
      labels: {
        formatter: function(){
          return names[this.value];
        }
      }
    },
    series: [{
      type:'column',
      data: data
    }]
  });
});

      </script>  
   </body>
</html>

Related Tutorials