plot Bar Chart where each series is plotted together rather than separated - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

plot Bar Chart where each series is plotted together rather than separated

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>basic example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.6.1.js"></script> 
      <script type="text/javascript">
    $(function(){//from   w w w  .  j  a  va 2  s  .c o  m
var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        type:'column'
        //type:'bar'
        //type:'area'
        //type:'scatter'
        //type:'bubble'
    },
    legend: { enabled: false },
    title: {},
    tooltip: {},
    plotOptions: {
        series: {
        }
    },
    xAxis: {
        categories:['Group A', 'Group B']
    },
    yAxis: {
        allowDecimals:false
    },
    series:[{
        name: 'first column in each group',
        data:[2,3]
    },{
        name: 'second column in each group',
        data:[3,4]
    },{
        name: 'third column in each group',
        data:[5,6]
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height:400px;margin:1.5em 1em;"></div>  
   </body>
</html>

Related Tutorials