Column Chart Stacking

Column Chart Stacking

by Emmanuel Umozurike

HTML

<head id="Head1" runat="server">
    <title>Counts</title>
    <style type="text/css">
        body {
            background:url(bg.gif) repeat-y top center #eaeaea;
            color:#3a3a3a;
            font:10px Verdana, Tahoma, Arial, sans-serif;
            margin:0 auto;
            padding:0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <!-- Use highstocks.js instead of highcharts.js for horizontal scrolling -->
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/modules/drilldown.js"></script>
    <script src="../HighCharts/js/modules/exporting.js" type="text/javascript"></script>
    <script src="../HighCharts/js/themes/grid.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
         <h1 style="text-align:center">Counts</h1>
        <br />
        <div id="Bar1170hMonthly" style="min-width: 310px; height: 400px; margin: 20px"></div>
        <br />

JavaScript

$('#Bar1170hMonthly').highcharts({
     chart: {
         type: 'column'
     },
     title: {
         text: 'Monthly Counts'
     },
     subtitle: {
         text: ''
     },
     xAxis: {
         categories: [
             'Jan',
             'Feb',
             'Mar',
             'Apr',
             'May',
             'Jun',
             'Jul',
             'Aug',
             'Sep',
             'Oct',
             'Nov',
             'Dec']
     },
     yAxis: {
         min: 0,
         title: {
             text: 'Counts'
         }
     },
     tooltip: {
         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
             '<td style="padding:0"><b>{point.y:f} cases</b></td></tr>',
         footerFormat: '</table>',
         shared: true,
         useHTML: true
     },
     plotOptions: {
         column: {
             //stacking: 'normal',
             pointPadding: 0.2,
             borderWidth: 0
         }
     },
     series: {
         cursor: 'pointer',
         point: {
             events: {
                 click: function () {

                 }
             }
         }
     }


     ,
     series: [{
         grouping: true,
         name: '2011: 36',
         data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 19]

     }, {
         name: '2012: 237',
         data: [13, 14, 35, 23, 37, 11, 23, 22, 8, 12, 18, 21]

     }, {
         name: '2013: 360',
         data: [43, 23, 35, 18, 44, 23, 35, 24, 23, 31, 25, 36]

     }, {
         stacking: true,
         stack: 'B',
         name: '2014: 112: stack A',
         data: [6, 1, 1, 32, 9, 0, 0, 0, 0, 0, 0, 0]

     }, {
         stacking: true,
         stack: 'B',
         name: '2014: 112: stack B',
         data: [9, 2, 2, 32, 9, 0, 0, 0, 0, 0, 0, 0]

     }]


     //


 });