Vue-chartjs: Not working at all

Created on 26 Apr 2018  ยท  2Comments  ยท  Source: apertureless/vue-chartjs

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>

Expected Behavior

I'm following the documentation, but its not working,I'm using laravel mix
Working normally

Actual Behavior

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

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)

Environment

  • vue.js version: <"vue": "^2.5.7",>
  • vue-chart.js version: <"vue-chartjs": "^3.3.1",>
  • npm version: <6.0.0<
โ“ question

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-chart component, you pass in the chart data as a prop?

  1. Have you registered your component properly ?
  2. Are you using Single File Components for your LineChart ? If so, have you removed the <template></template> tags ?

All 2 comments

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?

  1. Have you registered your component properly ?
  2. Are you using Single File Components for your LineChart ? If so, have you removed the <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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gkatsanos picture gkatsanos  ยท  3Comments

Scalpel78 picture Scalpel78  ยท  4Comments

ihrankouski picture ihrankouski  ยท  3Comments

Sykomaniac picture Sykomaniac  ยท  3Comments

egorzekov picture egorzekov  ยท  4Comments