Chartjs-How to pass data for stacked chart in vue-chartkick

by

0👍

As a starter you could read the article Stacked Bar Chart with Chart.js, it explains step-by-step how to create a stacked bar chart.

I also made a code sample that hopefully produces what you’re looking for.

new Chart(document.getElementById("myChart"), {
  type: "bar",
  data: {
    labels: ['Monday'],
    datasets: [{
      label: "X",
      data: [2],
      backgroundColor: "red"
    },
    {
      label: "Y",
      data: [10],
      backgroundColor: "blue"
    }]
  },
  options: {
    scales: {
      xAxes: [{
         stacked: true
      }],
      yAxes: [{
        stacked: true
      }]      
    }
  }
});
canvas {
  max-width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="20" height="20"></canvas>

Leave a comment