When resizing window, chart returns to first loaded state

[Tkdigitalltd]

Expected Behavior

Re-rendered chart should be visible with updated when resizing the window.

Actual Behavior

Re-rendered chart resets to initial state.

Vue.component('line-chart', {
  extends: VueCharts.Line,
  mounted () {
    this.renderLineChart(moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD'));
  },
  methods: {
    renderLineChart: function (start, end) {
      axios.get('/app/messenger/chart-data?start_date=' + start + '&end_date=' + end)
        .then(response => {
          this.renderChart({
            labels: response.data.dates,
            datasets: [
              {
                label: 'Subscribers',
                data: response.data.subscribers,
              }
            ]
          }, {
            responsive: true,
            maintainAspectRatio: false,
          });
        })
        .catch(error => {
          ShopifyApp.flashError('Something went wrong. Please refresh the page and try again.');
        });
    },
    updateData: function (start, end) {
      this.renderLineChart(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'));
    },
  }
});

Environment

• vue.js version: 2.1.10
• vue-chart.js version: ^3.0.0
• npm version: 5.0.0

[apertureless]

Well your flow is a bit weird, tho.
However your updateData() method will call renderLineChart() which makes a new API request and then re-call renderChart() which creates a new chart intstance.

I guess the problem is, that you don't clean up the old instance.
I would suggest to call

this.$data._chart.destroy() before you re-creating the chart instance.

[aaronpeterson]

jtblin/angular-chart.js#187 same issue with Angular's chartjs component. I'm wondering if this fix should be added to vue-chartjs as well.

[apertureless]

This issue should be fixed some time ago: https://github.com/apertureless/vue-chartjs/blob/develop/src/BaseCharts.js#L70-L71

The chart instance gets deleted before calling renderChart().

[aaronpeterson]

Ahhh sorry totally missed that one! 89a7cac#diff-931796a1046f9c6159eb4b80dbdef66a