Group Chart with multiple layers in ChartJS - Javascript Chart.js

Javascript examples for Chart.js:Chart Configuration

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

Description

Group Chart with multiple layers in ChartJS

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.7.3/Chart.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/* w w w.j av  a2s.  com*/
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["13Aug", "14Aug", "15Aug"],
        datasets: [{
            label: 'Blue',
            stack: 'Stack 0',
            data: [240, 270, 1320],
              backgroundColor: 'blue',
        },
        {
            label: 'Orange',
            stack: 'Stack 1',
            data: [0, 300, 1520],
              backgroundColor: 'orange',
        },
        {
            label: 'Yellow',
            data: [1500, 700, 200],
            stack: 'Stack 1',
              backgroundColor: 'yellow',
        }]
    },
    options: {
        scales: {
                  xAxes: [{
                     stacked: true,
                  }],
                  yAxes: [{
                     stacked: true
                  }]
               }
    }
});
    }

      </script> 
   </head> 
   <body> 
      <canvas id="myChart" width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials