Chartjs to create Stacked bar chart - Javascript Chart.js

Javascript examples for Chart.js:Bar Chart

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

Description

Chartjs to create Stacked bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script> 
      <style id="compiled-css" type="text/css">

small//from  ww  w.j ava2s  .  co  m
{
   display: block;
   margin-top: 1em;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
var barData = {
            labels : ['Italy', 'UK', 'USA', 'Germany', 'France', 'Japan'],
            datasets : [{
               label : '2010 customers #',
               backgroundColor : '#382765',
               data : [2500, 1902, 1041, 610, 1245, 952]
            }, {
               label : '2014 customers #',
               backgroundColor : '#7BC225',
               data : [1000, 1689, 1318, 589, 1199, 1436]
            }]
         };
         var context = document.getElementById('clients').getContext('2d');
         var clientsChart = new Chart(context, {
            type : 'bar',
            data : barData,
            options : {
               scales : {
                  xAxes : [{
                     stacked : true,
                  }],
                  yAxes : [{
                     stacked : true
                  }]
               }
            }
         });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="clients" width="500" height="350"></canvas>  
   </body>
</html>

Related Tutorials