prevent column overlap in column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

prevent column overlap in column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Jugal | Overlapping Columns | Highcharts &amp; Highstock</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container{/*from  w  w  w .ja v a2s .  c  o  m*/
   min-width:500px;
}


      </style> 
      <script type="text/javascript">
    var VanillaRunOnDomReady = function() {
var chartingOptions = {
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    xAxis: {
        categories: ['5:1', '4:1', '3:1', '2:1', '1:1', '1:2', '1:3', '1:4', '1:5']
    },
    plotOptions: {
        column: {
        }
    },
    series: [
        {
        name: 'Serie 2',
        data: [20, 24, 30, 40, 60, 80, 90, 96, 100,20, 24, 30, 40, 60, 80, 90, 96, 100]},
    {
        name: 'Serie 1',
        data: [100, 96, 90, 80, 60, 40, 30, 24, 20,100, 96, 90, 80, 60, 40, 30, 24, 20]}
                ]
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
    }
var alreadyrunflag = 0;
if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1;
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}
window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

      </script> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.js"></script> 
      <script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/highstock.src.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/stock/modules/exporting.src.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials