Unable to Construct Stacked Vue-ChartJS Line Plot

Question

I'm trying to make a stacked line chart using Vue-ChartJS but am having difficulties getting it to stack.

I tried adding the following into the fill data function but saw no change.

scales: {
    yAxes: [{ stacked: true}]   
}

I also tried creating a this.options entry but that didn't work either. The minimal reproducible code for the chart is as follows, any advice or help would be much appreciated!

## LineChart.js
import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  props: ['options'],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

## LineChart.vue
<template>
  <div class="small">
    <line-chart :chart-data="chartData"></line-chart>
    <button @click="fillData()">Randomize</button>
  </div>
</template>

<script>
import LineChart from '../store/LineChart.js'

export default {
  components: {
    LineChart
  },
  data() {
    return {
      chartData: null
    }
  },
  mounted() {
    this.fillData()
  },
  methods: {
    fillData() {
      this.chartData = {
        labels: [this.getRandomInt(), this.getRandomInt()],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [this.getRandomInt(), this.getRandomInt()]
          },
          {
            label: 'Data Two',
            backgroundColor: '#C23596',
            data: [this.getRandomInt(), this.getRandomInt()]
          }
        ]
      }
    },
    getRandomInt() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
}
</script>

<style>
.small {
  max-width: 600px;
  margin: 150px auto;
}
</style>

alabama · Accepted Answer · 2020-05-31 16:12:00Z

1

You need to pass scales in the options:

...

<div class="small">
  <line-chart :chart-data="chartData" :options="options"></line-chart>
  <button @click="fillData()">Randomize</button>
</div>

...

data() {
  return {
    chartData: null,
    options: {
      scales: {
        yAxes: [
          {
            stacked: true
          }
        ]   
      },
    },
  }
},

answered May 31, 2020 at 16:12

alabama

4227 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unable to Construct Stacked Vue-ChartJS Line Plot

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related