import {Line} from 'vue-chartjs'
export default {
extends : Line,
data(){
return {
tableData : [],
chartData: {
labels: ['January', 'February'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20]
}
]
}
}
},
mounted () {
this.renderChart(this.chartData)
},
<div class="col-lg-5">
<h4>Diagram Line Produk</h4>
<line-chart :chart-data="chartData"></line-chart>
</div>
I'm following the documentation, but its not working,I'm using laravel mix
Working normally
Unknown custom element:
app.js:7011 TypeError: Cannot read property 'getContext' of undefined
at VueComponent.renderChart (app.js:53172)
at VueComponent.mounted (app.js:20589)
at callHook (app.js:8191)
at Object.insert (app.js:9428)
at invokeInsertHook (app.js:11230)
at VueComponent.patch [as __patch__] (app.js:11449)
at VueComponent.Vue._update (app.js:7940)
at VueComponent.updateComponent (app.js:8058)
at Watcher.get (app.js:8412)
at Watcher.run (app.js:8489)
Hey @icangku
I don't really understand what you are trying to do here.
You created your chart component, however you set your chartdata as a local data model.
However in the next snippet where you are using your line-chart component, you pass in the chart data as a prop?
<template></template> tags ?I did exactly follow the docs, and sure it won't work. But then I found this
https://codepen.io/apertureless/pen/vxWbqB?editors=1010
it helps me
Most helpful comment
Hey @icangku
I don't really understand what you are trying to do here.
You created your chart component, however you set your chartdata as a local data model.
However in the next snippet where you are using your
line-chartcomponent, you pass in the chart data as a prop?<template></template>tags ?