Chartjs-Function() is not a function;

by

0👍

✅

In Vue, the template is already bound to the context, so you don’t need this for variables and methods.

Try this (no pun intended):
*Note the new variable chartDataValues

<template>
  <div>
    <Bar
      :chart-options="chartOptions"
      :chart-data="chartDataValues"
    />
    <button v-on:click="chartData">
      Change Data
    </button>
  </div>
</template>

<script>
import { Bar } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: {
    Bar
  },
  data() {
    return {
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      },
      chartDataValues: {}
    }
  },
  methods: {
    chartData() { 
      const updatedChartData = {
        labels: [ 'January', 'February' ],
        datasets: [{
          data: [ this.getRandomInt(), this.getRandomInt(), ]
        }]
      };
      console.log(updatedChartData.datasets)
      this.chartDataValues = updatedChartData;
    },

    getRandomInt() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    }
  }
  
  
}
</script>

Leave a comment