Vue-chartjs: Responsive chart not working when resizing

Created on 22 May 2018 · 2Comments · Source: apertureless/vue-chartjs

Expected Behavior

Chart resizes correctly everytime.

Actual Behavior

At first, chart adapts correctly, but when window is maximized (navigation drawer is displayed), chart does not resize correctly. If I resize again to a smaller window (navigation drawer hides), chart does not resize, leaving the empty space of the navigation drawer.

Before resize
After resize
Another resize

Here is my code:

LineChart.vue:

<script>
  import {Line, mixins} from 'vue-chartjs'
  const { reactiveProp } = mixins
  export default {
    extends: Line,
    mixins: [reactiveProp],
    name: 'line-chart',
    props: ['options'],
    mounted () {
      this.renderChart({
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 39, 10, 40, 39, 80, 40]
          }
        ]
      }, {responsive: true, maintainAspectRatio: false})
    }
  }
</script>

Visualizer.vue

<template>
  <v-flex xs12 md12>
    <line-chart :chart-data="lineChartData" :options="options"></line-chart>
  </v-flex>
</template>
<script>
  import LineChart from './LineChart'
  export default {
    name: 'visualizer',
    components: {
      LineChart,
      'line-chart': LineChart
    },
    data () {
      return {
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [{
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: false
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    }
  }
</script>

App.vue

<template>
  <v-app>
    <v-navigation-drawer
      persistent
      :mini-variant="miniVariant"
      :clipped="clipped"
      v-model="drawer"
      enable-resize-watcher
      app
    >
      <v-list>
        <v-list-tile
          value="true"
          v-for="(item, i) in items"
          :key="i"
          href="javascript:;"
        >
          <v-list-tile-action>
            <v-icon v-html="item.icon"></v-icon>
          </v-list-tile-action>
          <v-list-tile-content @click.stop="changeUrl(item.url)">
            <v-list-tile-title v-text="item.title"></v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar
      app
      :clipped-left="clipped"
      class="primary"
      dark
    >
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>

      <v-toolbar-title v-text="title"></v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-content>
      <router-view/>
    </v-content>

    <v-footer :fixed="fixed" app>
      <span>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>
<script>
  import {mapMutations} from 'vuex'
  export default {
    data () {
      return {
        clipped: false,
        drawer: true,
        fixed: false,
        items: [{
          icon: 'bubble_chart',
          title: 'Serie 1',
          url: 'http://'
        }, {
          icon: 'bubble_chart',
          title: 'Serie2',
          url: 'http://'
        }],
        miniVariant: false,
        right: true,
        rightDrawer: false,
        title: 'data'
      }
    },
    name: 'App',
    methods: {...mapMutations(['changeUrl'])}
}
</script>