[Chartjs]-Stacked bar chart doesn't work โ€“ vuechart.js

1๐Ÿ‘

โœ…

You are using the wrong syntax. You are using the V2 syntax while using V3.
Note that in V3, all the scales are their own objects. For more info, please read the migration guide

import {
  Bar
} from 'vue-chartjs'
import {
  Chart,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'

Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChartStacked',
  components: {
    Bar
  },
  props: {
    chartInput: Object,
    chartHeight: Number,
    barColour: String
  },
  data() {
    return {
      chartOptions: {
        responsive: true,
        scales: {
          x: {
            stacked: true
          },
          y: {
            stacked: true
          }
        }
      }
    }
  },
  computed: {
    chartData() {
      return {
        labels: this.chartInput.map(d => d.x),
        datasets: [{
            data: this.chartInput.map(d => d.y1),
            backgroundColor: this.barColour
          },
          {
            data: this.chartInput.map(d => d.y2),
            backgroundColor: this.barColour
          }
        ]
      }
    }
  }
}

Leave a comment