Stacked chart Vue-chart.js

Hello All, In my project I'm trying to display a stacked chart. somehow it is displaying a bar chart. can anyone help me with this? Thanks in advance. Here is my files

BarChart.js

import {  Bar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends:  Bar,
  mixins: [reactiveProp]
}

<template>
    <div class="barChart col-md-6">
      <bar-chart :chart-data="barchartDatacollection"></bar-chart>
      </div>
  </div>
</template>

<script>
import BarChart from "./BarChart.js";

export default {
  components: {
    BarChart
  },
  data() {
    return {
      barchartDatacollection: { labels: [], datasets: [], options: {} }, 
     
    };
  },
  mounted() {
    this.barchartdata();
  },
  methods: {
    barchartdata() {
      this.barchartDatacollection = {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],

        datasets: [
          {
            label: "Bad Style",
            data: [40, 47, 44, 38, 27],
            backgroundColor: "#512DA8",
            hoverBackgroundColor: "#7E57C2",
            hoverBorderWidth: 0
          },
          {
            label: "Warning",
            data: [10, 12, 7, 5, 4],
            backgroundColor: "#FFA000",
            hoverBackgroundColor: "#FFCA28",
            hoverBorderWidth: 0
          },
          {
            label: "Error",
            data: [17, 11, 22, 18, 12],
            backgroundColor: "#D32F2F",
            hoverBackgroundColor: "#EF5350",
            hoverBorderWidth: 0
          }
        ],
        options: {
          scales: {
            xAxes: [
              {
                stacked: true,
                // gridLines: { display: true }
              }
            ],
            yAxes: [
              {
                stacked: true
              }
            ]
          },
          legend: { display: true }
        }
      };
    }
  }
};
</script>

steve_laracasts

6 years ago

Level 7

I don't know Vue-chart.js, but the curly braces in the options variable jump out as being questionable to me:

data() {
    return {
      barchartDatacollection: { labels: [], datasets: [], options: {} }, 
     
    };
  },

Perhaps these need to be square brackets? Just a guess, but if these options are not being loaded correctly then that would explain why you are getting a straight bar chart instead of a stacked chart!

steve_laracasts

6 years ago

Level 7

So, I realised the curly braces are correct, it should be a object not an array!!

I might have found the answer though:

"Options The options object is not reactive right now. So if you dynamically change the chart options, they will not be recognized by the mixin."

From:

https://vue-chartjs.org/guide/#troubleshooting

I would try this:

data() {
    return {
      barchartDatacollection: { 
    labels: [],
    datasets: [],
    options: {
        scales: {
            xAxes: [
              {
                stacked: true,
                // gridLines: { display: true }
              }
            ],
            yAxes: [
              {
                stacked: true
              }
            ]
          },
          legend: { display: true }
        }     
      }
    }

So you are setting your options at instantiation and not updating them!

Please or to participate in this conversation.