Vue-Chart.js: a chart doesn't begin from zero

Question

Here is my chart:

<script>
import { Bar, mixins } from 'vue-chartjs';

export default {
 extends: Bar,
 mixins: [mixins.reactiveProp],
 props: ['options'],
 mounted() {
  this.renderChart(this.chartData, this.options);
 },
};
</script>

And here is my component, a page with date pickers and the chart:

<template>
...
<datepicker v-model="periodStart"
                      minimum-view="month"
                      format="MMMM yyyy"
                      placeholder="Choose date"
                      language="ru"/>
          <span class="dash">—</span>
          <datepicker v-model="periodEnd"
                      minimum-view="month"
                      format="MMMM yyyy"
                      placeholder="Choose date"
                      language="ru"/>
<test-chart :chart-data="setData" />
</template>

<script>
import moment from 'moment';
import { mapGetters, mapActions } from 'vuex';
import Datepicker from 'vuejs-datepicker';
import TestChart from '../charts/TestChart';

export default {
 data() {
  return {
    periodStart: new Date(),
    periodEnd: new Date(),
   };
  },
 components: {
   Datepicker,
   TestChart,
 },
computed: {
  ...mapGetters(['getReport', 'getChartLabels', 'getChartData']),
  setData() {
  return {
    options: {
      scales: {
        yAxes: [{
          stacked: true,
          ticks: {
            beginAtZero: true,
            min: 0,
          },
        }],
        xAxes: [{
          stacked: true,
          ticks: {
            beginAtZero: true,
            categoryPercentage: 0.5,
            barPercentage: 1,
          },
        }],
      },
      responsive: true,
      maintainAspectRatio: false,
    },
    labels: this.getChartLabels,
    datasets: [
      {
        label: 'Количество активных резюме',
        backgroundColor: '#f87979',
        data: this.getChartData,
      },
    ],
  };
 },
},
</script>

When I first open a page with the chart, it behaves correctly showing the yAxes starting at 0. But when I pick a period with date pickers and pass data to the chart, it shows the yAxes starting from the minimal number which came from the back end. Can anybody advise how to avoid this?

Also have an issue with making this chart responsive. Somehow it ignores responsive: true in options.

Answer 1

I am wondering how this even works.

You return in your setData both, the chart data and the options. Which will not work. The chart options should be a seperate object.

You have defined a options prop in your chart component, but you don't pass any options to it.

You have to pass both, chartdata and the options to your chart component. If you pass your chart options into the options prop of your chart component it should work.

Keep in mind that the reactiveMixin will either update the chart or completely re-render it with calling this.renderChart(chartdata, options)

So if you don't pass any options it will re-render with default options.