Chart crashes when reentering page

[aleksrs]

Expected Behavior

Chart renders upon loading the page, and works fine. Go to another page, and come back and the chart should render and still work fine.

Actual Behavior

When leaving the page and come back the chart component crashes with the console error
Uncaught TypeError: Cannot read property 'clearRect' of null

Chart component:

export default {
    extends: Line,
    props: {
      chartData: {
        type: Array | Object,
        required: false
      }
    },
    data () {
      return {
        options: { // Chart.js options
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              },
              gridLines: {
                display: true
              }
            }],
            xAxes: [ {
              gridLines: {
                display: false
              }
            }]
          },
          legend: {
            display: true
          },
          responsive: true,
          maintainAspectRatio: false
        }
      }
    },
    mounted () {
      this.renderChart({
        labels: ['Januar', 'Februar', 'Mars', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Desember'],
        datasets: [
          {
            label: 'Salg per måned',
            borderColor: 'rgba(66, 134, 244, 1)',
            pointBackgroundColor: 'white',
            borderWidth: 1,
            pointBorderColor: '#249EBF',
            backgroundColor: 'rgba(66, 134, 244, 0.2)',
            data: this.chartData
          }
        ]
      }, this.options)
      Event.$on('updateLineChart', () => {
        this._chart.update()
      })
    }
  }

Environment

• vue.js version: 2.4.4
• vue-chart.js version: 2.7.8
• npm version: 5.4.2

[apertureless]

Your component looks okay. Please provide a reproduction.
Are you using vue-router ?

[aleksrs]

Can´t seem to be able to replicate the error. Yes i´m using vue-router. Do you think that might be the cause of error? I´ve also looked trough the issues in chart.js github. The closest i came here is this issue https://github.com/chartjs/Chart.js/issues/1377.

[apertureless]

Hm thats weird. I don't think that there is a problem with vue-router. It should work without problems because the chart.js instance get properly destroyed. https://github.com/apertureless/vue-chartjs/blob/develop/src/BaseCharts/Bar.js#L88

I will see if I can reproduce it.

[apertureless]

Well I could not reproduce it. I guess it rather an error in your code.
Could be related to

Event.$on('updateLineChart', () => {
        this._chart.update()
      })

I don't know when the event get triggered. Maybe the chart is not initialized.
You could try to wrap it in

if(this._chart) {...} to be sure the object is available.