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

Question

How can I use charts with Charts.js in vue and vuetify? I tried all ways. Can anyone help me step by step?

vue version = 2.6.10
chart.js version = 2.9.3
vue-chartjs = 3.5.0

---

<template>
    <canvas id="chartRecord" width="100%" height="400"></canvas>
</template>
<script>
    import {Line} from 'vue-chartjs';

    export default Line.extend({
        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]
                    }
                ]
            })
        }
    })

and this is where i want to show my chart Dashboard.vue

<v-card>
            <v-layout wrap>
                <v-flex xs12 md12>
                    <my-chart></my-chart>
                </v-flex>
            </v-layout>
        </v-card>

    <script>
        import MyChart from './../components/Charts/Chart.vue'

        export default {
            components: {
                'my-chart' : MyChart
            }
        }


</script>

but i'm getting this error in console TypeError: vue_chartjs__WEBPACK_IMPORTED_MODULE_0__.Line.extend is not a function Firefox can’t establish a connection to the server at ws://localhost:8080/sockjs-node/183/ub2b43v5/websocket. The connection to ws://localhost:8080/sockjs-node/183/ub2b43v5/websocket was interrupted while the page was loading.

Answer 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