Chartjs-Problem with Charts.js in vue. anyone can help step by step

by

1👍

✅

There are a couple of problems with your implementation.
The docs on the npm page of vue-chartjs will help clear this out.

For one, vue-chartjs works only within .js files or if you want to use SFCs you should exclude the template tag since vuejs can’t merge templates and the mixin (used implicitly by vue-chartjs) has a template already.

So your implementation would look something like this,

MyChart.vue – remember this file SHOULD NOT have a <template> tag.

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart({
      labels: [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
      ],
      datasets: [
        {
          label: "GitHub Commits",
          backgroundColor: "#f87979",
          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
        }
      ]
    });
  }
};
</script>

App.vue

<template>
  <my-chart></my-chart>
</template>
<script>
  import MyChart from 'path/to/component/MyChart'

  export default {
    components: {
       'my-chart': MyChart
    }
  }
</script>

I’ve created a codesandbox for this, you can find the implementation here

Leave a comment