How to pass data for stacked chart in vue-chartkick

0
votes

I have tried many options, but not able to create a column or bar chart with stacked representation. I guess I don't know how should the data be presented. I tried the following:

[
        [
            "Monday",
            2,
            10
        ],
]

[
        [
            "Monday",
            [2],
            [10]
        ],
]

[
        [
            "Monday",
            [
              2,
             10
            ]
        ],
]
1
vue.jsvuejs2chart.jschartkick

1 Answers

0
votes

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>