Chart.js combine two pieces of data into one bar to create stack - Javascript Chart.js

Javascript examples for Chart.js:Pie Chart

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

Description

Chart.js combine two pieces of data into one bar to create stack

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from w w w . j av  a 2s  .  c o m
var goals = [12, 19, 3]
var predictions = [8, 11, 1]
var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [{
                            label: '# of Goals',
                            fillColor: "rgba(220,220,220,0.5)",
                            backgroundColor: "rgba(46, 44, 211, 0.7)",
                            highlightFill: "rgba(220,220,220,0.75)",
                            highlightStroke: "rgba(220,220,220,1)",
                            data: goals
                        },
                        {
                            label: '# of predicted Goals',
                            fillColor: "rgba(0,0,0,0.5)",
                            backgroundColor: "rgba(215, 44, 44, 0.7)",
                            highlightFill: "rgba(0,0,0,0.5)",
                            highlightStroke: "rgba(0,0,0,0.5)",
                            data: predictions
                        }
                    ]
        },
        options: {
            responsive: false,
            scales: {
                  xAxes: [{
                  stacked: true,
                }],
                yAxes: [{
                    stacked: true,
                  ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });
    }

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

Related Tutorials