Unable to draw a scatter chart with vue-charts

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)