Computed property as reactiveprop to vue-chartjs?

Question

I'm at my wits' end trying to figure out what's wrong with this code. Boiled down, I have a vuejs component that wants to pass data to a vue-chartjs chart component. Following this example from the vue-chartjs documentation, I have something like the following:

Parent.vue

<template>
      <line-canvas :chart-data="displaydatacollection"></line-canvas>
<template>

<script>
import LineCanvas from './LineCanvas'

export default () {
  components: LineCanvas,
  computed: {
    toDisplay () {
      // complicated function that returns something like
      //  [ { date: '2017-09-01T10:30:00Z', count: 12345 }, ... ]
    },
    displaylabels () {
      return this.toDisplay.map(elem => {
        return elem.date
      })
    },
    displaydata () {
      return this.toDisplay.map(elem => {
        return elem.count
      })
    },
    displaydatacollection () {
      return {
        labels: this.displaylabels,
        datasets: [
          {
            label: 'Cumulative',
            borderColor: '#00bfff',
            yAxisID: 'Cumulative',
            fill: false,
            pointRadius: 0,
            data: this.displaydata
          }
        ]
      }
    }
  }
}
</script>

LineCanvas.js

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  mounted () {
    this.renderChart(this.chartData)
  }
}

(The above code is the latest in a series of variations on a theme, but this seems to get the closest to actually rendering a chart.)

When I run my code in a dev server, I get console errors like:

TypeError: Cannot read property 'getBasePixel' of undefined at ChartElement.updateElement

and

Uncaught TypeError: Cannot read property 'skip' of undefined at ChartElement.draw

As a note, to be more faithful to the example, one of the other solutions I tried was to make toDisplay a data field and add a watch method to the field from which it is derived that recomputes toDisplay, but the result is the same. My hunch is that it has something to do with using computed properties as the reactiveProp passed to a chart component (hence the title of the post), but am not sure of this. Can someone please point out what I'm doing wrong, why it's wrong, and give some clue as to how to fix this code?

-vue v 2.5.2 -vue-chartjs v 3.0.0 -chart.js v 2.7.0 -npm v 5.5.1

Update:

Ok, after messing around with this some more, I've isolated the problem as yAxisID: 'Cumulative'. This line makes the difference between a chart that renders happily and one that barfs. Strange, since this property is supposed to work for Chart.js >v 2.2.

score 0 · Answer 1 · answered May 01 '18 at 07:53

I'm getting the same error. I eventually realised I was defining the ID for the axis in slightly the wrong place. We'd need to see the chart options to see if it's the same underlying cause.

Your axes options should look something like this:

  scales: {
    yAxes: [{
      id: 'Cumulative'
    }]
  }

If they don't, you may well see the above error.

An uglier fix is to change the axis labels in the datasets to match the default e.g put yAxisID: 'y-axis-1'.

Computed property as reactiveprop to vue-chartjs?

Update:

1 Answers1