Диаграмма Vuechart-js не изменится

Question

Я создал кольцевую диаграмму, основанную на некоторых пользовательских данных, и отображаю ее на сводной странице. Кольцевая диаграмма отображается при нажатии кнопки, однако она слишком большая и я не могу изменить ее размер.

Я попытался установить для параметров {responseive: false, keepAspectRatio: false} и {responseive: true, keepAspectRatio: false}, как говорят документы, но не повезло. Диаграмма остается постоянной, слишком большой.

Вот мой DonutChart.js

import { Doughnut } from 'vue-chartjs';

export default {
  extends: Doughnut,
  props: ['data', 'options'],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
  },
  computed: {
    chartData() {
      return this.data;
    },
    chartOptions() {
      return this.options;
    },
  },
  methods: {
    renderLineChart() {
      this.renderChart({
        labels: ['Unconfirmed', 'Confirmed'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: ['#E46651', '#41B883', '#00D8FF'],
            data: this.chartData,
          },
        ],
      });
    },
  },
  watch: {
    chartData() {
      this.renderLineChart();
    },
  },
};

и вот мое Summary.vue

<template>
<div>
 <button class="button" @click="generateReport">
    <span>{{enabled_users + total_users}}</span>
    <b-icon icon="account-multiple" size="is-small"></b-icon>
 </button>
 <div :width="100" :height="100" class="stats">
     <h1>Stats component</h1>
     <center><doughnut-chart  :width="100" :height="100" :data="dataChart" :options='optionsChart'>
     </doughnut-chart></center>
  </div>
  </div>
</template>

<script>
/* eslint no-param-reassign: 0 */
/* eslint arrow-body-style: 0 */
/* eslint arrow-parens: 0 */
import { mapState, mapGetters, mapActions } from 'vuex';
import DoughnutChart from './DonutChart';

export default {
  name: 'Summary',
  components: {
    DoughnutChart,
  },
  data() {
    return {
      dataChart: [0, 0],
      optionsChart: {
        responsive: false,
      },
      searchTerm: '',
      checkedRows: [],
      selectedGroup: null,
      defaultOpenedDetails: [],
      enabled_users: 0,
      total_users: 0,
    };
  },
  computed: {
    ...mapState('auth', ['allUsers', 'groups', 'loadingUsers', 'userAuthEvents']),
    ...mapGetters('auth', ['userGroups']),
    filteredUsers() {
      return this.allUsers.filter(user => {
        return user.Email.toLowerCase().indexOf(this.searchTerm.toLowerCase()) > -1;
      });
    },
    numberOfUsers() {
      return this.allUsers.length();
    },
  },
  methods: {
    ...mapActions({
      getAllUsers: 'auth/getAllUsers',
      getAllGroups: 'auth/getAllGroups',
      addUserToGroup: 'auth/addUserToGroup',
      deleteUsers: 'auth/deleteUsers',
      listGroupsForUser: 'auth/listGroupsForUser',
      listAuthEventsForUser: 'auth/listAuthEventsForUser',
    }),

    selectAllUsers() {
      this.allUsers.forEach(
        (user) => {
          if (user.Enabled === true) {
            this.enabled_users += 1;
          } else { this.total_users += 1; }
        },
        this.listAuthEventsForUser('test@test.com'),
        // console.log(this.userAuthEvents),
      );
    },

    updateChart() {
      this.dataChart = [this.total_users, this.enabled_users];
    },

    generateReport() {
      this.selectAllUsers();
      this.updateChart();
    },
  },
  mounted() {
    this.selectAllUsers();
  },
};

</script>
<style>
.b-table .table {
  background: transparent;
}
</style>

Я бы ожидал, что график будет изменен на 100px на 100px, но вместо этого он будет 900x900, или что-то в этом роде.