VUE-CHART this.renderChart is not a function

Question

I'm trying to make a chart in Vue.js but I'm getting this error all the time:

Uncaught (in promise) TypeError: this.renderChart is not a function

Here is my code:

<template>
  <div>
    <canvas ref="donutChart" width="400" height="400"></canvas>
  </div>
</template>

<script>
import { Doughnut } from 'vue-chartjs';

export default {
  extends: Doughnut,
  name: 'donut',
  mounted() {
    const chartData = {
      labels: ['Red', 'Green', 'Blue'],
      datasets: [
        {
          backgroundColor: ['#FF5733', '#33FF57', '#3380FF'],
          data: [25, 30, 45]
        }
      ]
    };

    const chartOptions = {
      responsive: true,
      maintainAspectRatio: false
    };

    this.renderChart(chartData, chartOptions);
  }
};
</script>

Gate-Tec · Accepted Answer · 2023-11-20 21:04:00Z

0

You are probably using V4 or V5 of vue-chart.js. The syntax has been changed as noted in their migration guide.

Instead of calling this.renderChart() you have to directly insert the actual component in the template:

<template>
  <div>
    <Doughnut
      :data="chartData"
      :options="chartOptions"
      ref="donutChart"
      :width="400"
      :height="400"
    />
  </div>
</template>

<script>
import { Doughnut } from 'vue-chartjs';

export default {
  name: 'donut',
  data() {
    chartData: {
      labels: ['Red', 'Green', 'Blue'],
      datasets: [
        {
          backgroundColor: ['#FF5733', '#33FF57', '#3380FF'],
          data: [25, 30, 45]
        }
      ]
    },
    chartOptions: {
      responsive: true,
      maintainAspectRatio: false
    }
  }
};
</script>

Possible duplicate of 73430545.

answered Nov 20, 2023 at 21:04

Gate-Tec

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VUE-CHART this.renderChart is not a function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related