Vue-chartjs: Stacked bar chart?

[Scalpel78]

Hi, I'm looking for a Vue component that can do stacked bar.

Does vue-chartjs support the Stacked Bar type? (http://www.chartjs.org/samples/latest/charts/bar/stacked.html)

[apertureless]

Sure.

https://stackoverflow.com/questions/37249439/chartjs-v2-0-stacked-bar-chart

You only have to pass the stacked: true flag to the options.

options: {
    scales: {
      yAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        stacked: true,
        ticks: {
          beginAtZero: true
        }
      }]

    }

[Scalpel78]

Thanks, got one step closer to acheiving the graph I want. But the data isn't stacked the same way as in the example. This is a screenshot of my graph:

Which is created from this:

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          label: 'Invoiced',
          backgroundColor: '#12c44c',
          data: [800, 900, 1000, 850, 820, 920, 700, 1010, 999, 820, 500]
        },
        {
          label: 'Order',
          backgroundColor: 'red',
          data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
        }
      ],
      options: {
        scales: {
          yAxes: [{
            stacked: true
          }],
          xAxes: [ {
            stacked: true
          }]
        },
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      }
    })
  }
}

But I'd like it to be stacked like this:

Any idea what I have to change to get it stacked like that?

[apertureless]

Well it is working fine for me:

https://codepen.io/apertureless/pen/zEmNpp

You also need to change the categoryPercentage and barPercentage so the bar charts are not that thin.

Do you have the current version of chart.js installed?

[Scalpel78]

Thanks, got it working now. Think the problem was that my options needed to be passed in as the second parameter to renderChart.

This is the final version that works:

import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
          type: 'line',
          label: 'Budget',
          backgroundColor: 'brown',
          fill: false,
          data: [1020, 1020, 1020, 1020, 1020, 350, 600, 1020, 1020, 1020, 1020, 1020]
        },
        {
          type: 'bar',
          label: 'Invoiced',
          backgroundColor: '#12c44c',
          data: [1050, 900, 1000, 850, 820, 420, 700, 1010, 999, 340, 0, 0]
        },
        {
          type: 'bar',
          label: 'Order',
          backgroundColor: 'red',
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 800, 120, 90]
        }
      ]}, {
        title: {
          display: true,
          text: 'Oversikt'
        },
        scales: {
          yAxes: [{
            stacked: true
          }],
          xAxes: [ {
            stacked: true,
            categoryPercentage: 0.5,
            barPercentage: 1
          }]
        },
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      }
    )
  }
}