stacked bar chart doesn't work - vuechart.js

user_14701704 0
Viewed 50

I try to create a stacked bar chart with vue-chartjs and unfortunately I'm not able to get this job done. My code for the vue-component looks like as follows at the moment:

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

ChartJS.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: {
          xAxes: [
            {
              stacked: true
            }
          ],
          yAxes: [
            {
              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
        }]
      }
    }
  }
}
<template>
  <Bar
    :chart-options= this.chartOptions
    :chart-data="chartData"
    :chart-id="chartId"
    :dataset-id-key="datasetIdKey"
    :plugins="plugins"
    :css-classes="cssClasses"
    :styles="styles"
    :width="width"
    :height= this.chartHeight
  />
</template>

How to define the chart-options properly to get a stacked bar chart? Thanks in advance.

chart.js vue.js javascript
1 Answers

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
          }
        ]
      }
    }
  }
}
user_86829830
Related