Bar chart from Vue-chartjs doesn't render

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>