title: Chart.js combine two pieces of data into one bar
body: <p>I am using <code>charts.js</code> to display data. i have it set up and it is working.</p>
  
  <p>However, I have read through all the documentation and cannot figure out how to solve what I want to achieve. </p>
  
  <p>Currently, the <code>data</code> contains three numbers <code>[12, 19, 3]</code>. this is the number of actual goals scored. However, there is also a prediction as to the number of goals scored. This value is always going to be less based on the data I have. so the expected goals scored are <code>[8, 11, 1]</code>. these correspond with the first set.</p>
  
  <p>Is there anyway to combine the two values in the same bar. So in the first bar, it would go to 8, as the expected number of goals, and then the top part of the bar would show the actual number of goals.</p>
  
  <p>Here is my code below.</p>
  
  <p>Hopefully my question makes sense</p>
  
  <pre><code>    var ctx = document.getElementById("myChart");
      var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
              labels: ["Red", "Blue", "Yellow"],
              datasets: [{
                  label: '# of Goals',
                  data: [12, 19, 3],
                  backgroundColor: [
                      'rgba(255, 99, 132, 0.2)',
                      'rgba(54, 162, 235, 0.2)',
                      'rgba(255, 206, 86, 0.2)'
                  ],
                  borderColor: [
                      'rgba(255,99,132,1)',
                      'rgba(54, 162, 235, 1)',
                      'rgba(255, 206, 86, 1)'
                  ],
                  borderWidth: 1
              }]
          },
          options: {
              responsive: false,
              scales: {
                  yAxes: [{
                      ticks: {
                          beginAtZero:true
                      }
                  }]
              }
          }
      });
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [{
                label: '# of Likes',
                data: [12, 19, 3],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
         responsive: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>