Bar chart from Vue-chartjs doesn't render - vue.js

Question

In my Vue project I cannot render the Bar Chart I've created using vue-chartjs
I've tried reinstalling vue-chartjs and update my component, but nothing work.
I wonder if it's the problem with the component itself or I do rendering in a wrong way?
BarChart component
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
mounted() {
this.renderChart(
{
labels: [
"London",
"New York",
"New Zeland",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [
83,
26,
4,
]
}
]
},
{ responsive: true, maintainAspectRatio: false, height: 200 }
);
}
};
</script>
Home component:
<template>
<v-container class="grey lighten-5">
<v-col cols="12" sm="8">
<v-card class="pa-2" outlined align="center">
<BarChart/>
<div>CHART</div>
</v-card>
</v-col>
</v-container>
</template>
<script>
import BarChart from "#/components/charts/BarChart";
export default {
components: {
BarChart
},
};
</script>
<style></style>

Answer 1

The mistake in the method this.renderChart(). I had to look at the documentation to figure out how it should be structured.
The method this.renderChart() is provided by the Bar component and accepts two parameters: both are objects. The first one is your chart data, and the second one is an options object.
More in docs - https://www.chartjs.org/docs/latest/charts/bar.html
This worked for me:
<script>
import { Bar } from "vue-chartjs";
export default {
extends: Bar,
mounted() {
this.renderChart(
{
labels: [
"London",
"New York",
"New Zeland",
],
datasets: [
{
label: "Data One",
backgroundColor: "#f87979",
data: [
83,
26,
4,
]
}
]
},
{ responsive: true }
);
}
};
</script>