Easy and beautiful charts using Vue.js
In this post we will show you Easy and beautiful charts using Vue.js, hear for Easy and beautiful charts using Vue.js we will give you demo and example for implement.
Easy and beautiful charts using Vue.js
vue-chartjs
vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components.
Easy and beautiful charts using Vue.js and Vue.js
- Simple to use, easy to extend
- using the full power of chart.js
- Easy for both beginners and pros
How to use it?
we need to import the base chart class and extend it. it is gives much more flexibility when working with different data. we can pass the data over props or vue-resource. we can import the whole each module individual or package.
import VueCharts from 'vue-chartjs'
import { Bar, Line } from 'vue-chartjs'
Just create your own component.
// we use CommitChart.js
import { Bar } from 'vue-chartjs'
export default Bar.extend({
mounted () {
// hear we use Overwriting base render method with actual data.
this.renderChart({
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'onlinecode Commits',
backgroundColor: '#f88978',
data: [45, 205, 125, 395, 15, 45, 35, 85, 45, 25, 15, 15]
}
]
})
}
})
Then simply import and use your own extended component and use it like a normal vue component
import CommitChart from 'path/to/component/CommitChart'
Hope this code and post will helped you for implement Easy and beautiful charts using Vue.js. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org