vue-chartjs Line to vue-chart-3 #95

jeremyHixon · 2022-02-08T18:22:00Z

jeremyHixon
Feb 8, 2022

Thought I had everything I needed but I'm getting a console error:
this.renderChart is not a function

Here's the parent file:

<template>
  <div class="chart">
    <line-chart v-if="loaded" :chartdata="chartdata" :options="options" />
  </div>
</template>

<script>
import LineChart from "./LineChart.js";
export default {
  components: { LineChart },
  data() {
    return {
      chartdata: null,
      loaded: false,
      options: null
    }
  },
  methods: {
    getTracData() {
      const parsedData = this.$papa.parse("2021-12-21,3.61,3.47\n2021-12-22,3.65,3.47\n2021-12-23,3.62,3.47\n2021-12-24,3.74,3.48\n2021-12-25,3.77,3.49\n2021-12-26,3.76,3.5\n2021-12-27,3.61,3.5\n2021-12-28,3.69,3.51\n2021-12-29,3.72,3.52\n2021-12-30,3.65,3.52\n2021-12-31,3.72,3.53");
      const data = parsedData.data;
      const inverted = data.slice().reverse();
      return inverted;
    }
  },
  name: 'Chart',
  async mounted() {
    this.loaded = false;

    const data = this.getTracData();
    var labels = [];
    var dataSets = [];
    var i = 0;
    data.forEach(element => {
      var indDate = new Date(element[0]);
      labels.push(indDate.getDate());
      dataSets.push({
        label: element[0],
        data: [i, element[1]]
      });
      i++;
    });
    this.chartdata = {
      labels: labels,
      datasets: dataSets
    }
    this.loaded = true;
  }
}
</script>

And here's the LineChart component:

import { Line } from 'vue-chart-3'

export default {
  extends: Line,
  props: {
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  },
  mounted () {
    this.renderChart(this.chartdata, this.options)
  }
}