Uncaught Typeerror: Cannot Read Property 'transition' of Null
vue-chartjs
vue-chartjs is a wrapper for Chart.js in vue. You lot tin easily create reuseable chart components.
Demo & Docs
-
📺 Demo -
📖 Docs
Compatibility
- v1 later
@legacy- Vue.js ane.x
- v2 later
- Vue.js 2.10
Later on the final release of vue.js 2, you too get the v2 by default if you install vue-chartjs over npm. No need for the @side by side tag anymore. If you desire the v1 y'all need to define the version or use the legacy tag. If you're looking for v1 bank check this branch
Install
- yarn install:
yarn add vue-chartjs nautical chart.js - npm install:
npm install vue-chartjs nautical chart.js --save
Or if yous want to utilise it directly in the browser add
< script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"> </ script > < script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"> </ script > to your scripts. Run across Codepen
Browser
You can use vue-chartjs straight in the browser without any build setup. Like in this codepen. For this case, please apply the vue-chartjs.min.js which is the minified version. You lot as well need to add together the Nautical chart.js CDN script.
You lot tin can then simply register your component:
Vue . component ( 'line-chart' , { extends: VueChartJs . Line , mounted ( ) { this . renderChart ( { labels: [ 'January' , 'February' , 'March' , 'Apr' , 'May' , 'June' , 'July' ] , datasets: [ { label: 'Data One' , backgroundColor: '#f87979' , data: [ 40 , 39 , 10 , twoscore , 39 , 80 , xl ] } ] } , { responsive: truthful , maintainAspectRatio: false } ) } } ) How to apply
You need to import the component and then either utilise extends or mixins and add it.
Yous can import the whole package or each module individual.
import VueCharts from 'vue-chartjs' import { Bar , Line } from 'vue-chartjs' Simply create your ain component.
// CommitChart.js import { Bar } from 'vue-chartjs' consign default { extends: Bar , mounted ( ) { // Overwriting base return method with actual data. this . renderChart ( { labels: [ 'Jan' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'Dec' ] , datasets: [ { label: 'GitHub Commits' , backgroundColor: '#f87979' , data: [ forty , 20 , 12 , 39 , 10 , 40 , 39 , lxxx , forty , 20 , 12 , 11 ] } ] } ) } } or in TypeScript
// CommitChart.ts import { Component , Mixins } from 'vue-property-decorator' import { Bar , mixins } from 'vue-chartjs' ; import { Component } from 'vue-holding-decorator' ; @Component ( { extends: Bar , // this is important to add together the functionality to your component mixins: [ mixins . reactiveProp ] } ) export default class CommitChart extends Mixins ( mixins . reactiveProp , Bar ) { mounted ( ) { // Overwriting base return method with actual data. this . renderChart ( { labels: [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'Dec' ] , datasets: [ { label: 'GitHub Commits' , backgroundColor: '#f87979' , information: [ 40 , 20 , 12 , 39 , 10 , 40 , 39 , fourscore , 40 , twenty , 12 , 11 ] } ] } ) } } And so only import and use your ain extended component and apply it similar a normal vue component
import CommitChart from 'path/to/component/CommitChart' Another Example with options
You can overwrite the default chart options. Only laissez passer the options object as a second parameter to the return method
// MonthlyIncome.vue import { Line } from 'vue-chartjs' export default { extends: Line , props: [ 'data' , 'options' ] , mounted ( ) { this . renderChart ( this . data , this . options ) } } Use it in your vue app
import MonthlyIncome from 'path/to/component/MonthlyIncome' < template > < monthly-income :data = {.... } /> </template > < script > export default { components: { MonthlyIncome } , .... } </script> Reactivity
Chart.js does non update or re-return the nautical chart if new data is passed. However, you lot can but implement this on your own or use one of the two mixins which are included.
-
reactiveProp -
reactiveData
Both are included in the mixins module.
The mixins automatically create chartData as a prop or data. And add a watcher. If information has changed, the chart will update. However, keep in mind the limitations of vue and javascript for mutations on arrays and objects. It is of import that you lot laissez passer your options in a local variable named options! The reason is that if the mixin re-renders the chart it calls this.renderChart(this.chartData, this.options) and so don't pass in the options object directly or it volition be ignored.
More info hither
// MonthlyIncome.js import { Line , mixins } from 'vue-chartjs' export default { extends: Line , mixins: [ mixins . reactiveProp ] , props: [ 'chartData' , 'options' ] , mounted ( ) { this . renderChart ( this . chartData , this . options ) } } Mixins module
The mixins module is included in the VueCharts module and as a separate module. Some ways to import them:
// Load complete module with all charts import VueCharts from 'vue-chartjs' export default { extends: VueCharts . Line , mixins: [ VueCharts . mixins . reactiveProp ] , props: [ 'chartData' , 'options' ] , mounted ( ) { this . renderChart ( this . chartData , this . options ) } } // Load separate modules import { Line , mixins } from 'vue-chartjs' export default { extends: Line , mixins: [ mixins . reactiveProp ] , props: [ 'chartData' , 'options' ] , mounted ( ) { this . renderChart ( this . chartData , this . options ) } } // Load divide modules with destructure assign import { Line , mixins } from 'vue-chartjs' const { reactiveProp } = mixins export default { extends: Line , mixins: [ reactiveProp ] , props: [ 'chartData' , 'options' ] , mounted ( ) { this . renderChart ( this . chartData , this . options ) } } Single File Components
You can create your components in Vues single file components. However it is important that yous do not take the <template></template> included. Because Vue tin't merge templates. And the template is included in the mixin. If you leave the template tag in your component, information technology will overwrite the one which comes from the base of operations chart and you will have a bare screen.
Bachelor Charts
Bar Chart
Line Nautical chart
Doughnut
Pie
Radar
Polar Area
Chimera
Scatter
Build Setup
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for product with minification npm run build # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test For a detailed explanation of how things piece of work, check out the guide and docs for vue-loader.
Contributing
- Fork it ( https://github.com/apertureless/vue-chartjs/fork )
- Create your feature co-operative (
git checkout -b my-new-characteristic) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git button origin my-new-feature) - Create a new Pull Request
License
This software is distributed under MIT license.
GitHub
https://github.com/apertureless/vue-chartjsSource: https://bestofvue.com/repo/apertureless-vue-chartjs-vuejs-charts
0 Response to "Uncaught Typeerror: Cannot Read Property 'transition' of Null"
Post a Comment