Estoy construyendo un sitio web con laravel y usando vuejs para administrar el front-end. Quiero mostrar varios gráficos a través de vue-chartjs pero vue-chartjs no muestra el gráfico a pesar de que los datos se pasan con éxito. He estado siguiendo la guía de su sitio web, pero el gráfico nunca se muestra. Mi componente Vue

 <teplate> <div> ... <line-chart :chart-data="datacollection"></line-chart> <button @click="fillData()">Randomize</button> </div> </template> <script> import Table from '../equipments/table.vue' import LineChart from '../equipments/LineChart.js' import DropDownList from '../equipments/dropdownlist.vue' export default { data () { return { datacollection: null } }, components: { LineChart, Table, DropDownList }, mounted () { this.fillData() }, methods: { fillData () { this.datacollection = { labels: ['weqw','wewq'], datasets: [ { label: 'Data One', backgroundColor: '#f87979', data: [this.getRandomInt(), this.getRandomInt()] }, { label: 'Data One', backgroundColor: '#f87979', data: [this.getRandomInt(), this.getRandomInt()] } ] } }, getRandomInt () { return Math.floor(Math.random() * (50 - 5 + 1)) + 5 } } } </script> <style> .small { max-width: 600px; margin: 150px auto; } </style>

mi Gráfico.js

 import { Line, mixins } from 'vue-chartjs' const { reactiveProp } = mixins export default { extends: Line, mixins: [reactiveProp], props: ['options'], mounted () { // this.chartData is created in the mixin. // If you want to pass options please create a local options object this.renderChart(this.chartData, this.options) } }

Espero poder recibir algunos consejos aquí, gracias de antemano.