Unable to draw a scatter chart with vue-charts - vue.js

Question

What I end up with is blank page and the error
TypeError: Cannot read property 'getBasePixel' of undefined
and no chart on the page. i'm new to vue.js so might be totally use error but I tried to use mostly the demos from the vue-chartjs page. and chart.js page. It seems as somewhere I screwed up but can't see where. Some people report that chrome. Any assistance with thiis would be appreciated. Trying to bring in a few streams of data..2 to be exact....
CHARTS.JS
import { Scatter, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Scatter,
mixins: [reactiveProp],
props: ['options'],
mounted () {
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options)
}
}
Randomchart.vue*
<template>
<div class="small">
<scatter :chart-data="datacollection" :chart-options="options"></scatter>
<button #click="fillData()">Randomize</button>
</div>
</template>
<script>
import Scatter from '#/components/Chart1.js'
export default {
components: {
Scatter
},
data () {
return {
datacollection: null,
options: null
}
},
mounted () {
this.fillData()
},
methods: {
fillData () {
console.log("firing phiil");
this.datacollection = {
datasets: [{
label: 'My First dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-1',
borderColor: 'rgba(47, 152, 208, 0.2)',
backgroundColor: [
'rgba(47, 152, 208, 0.2)',
],
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}, {
label: 'My Second dataset',
xAxisID: 'x-axis-1',
yAxisID: 'y-axis-2',
borderColor: 'rgba(0, 0, 208, 0.2)',
backgroundColor: [
'rgba(47, 152, 208, 0.2)',
],
data: [{
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}, {
x: randomScalingFactor(),
y: randomScalingFactor(),
}]
}]
}
console.log(this.datacollection);
}
}
}
function randomScalingFactor () {
return Math.round(Math.random(-100, 100));
}
</script>
<style>
.small {
max-width: 600px;
margin: 150px auto;
}
</style>

Answer 1

The problem is with extra datasets params xAxisID and yAxisID.
it seems they're not set correctly, so when vue-charts tries getting references to those DOM elements, it gets undefined, thus the error.
You should either remove those params, or add those elements (via options or manually)
Here is a working version of the app
PS: also, if you need to get a random number from the interval [-100, 100], you should use Math.round(Math.random() * 200) - 100.
In your version, it always returns either 1, or 0 (because Math.random takes no parameters and always returns a value between 1 and 0)