Easy and beautiful charts using Chart.js

Easy and beautiful charts using Chart.js

In this post we will show you Easy and beautiful charts using Chart.js, hear for Easy and beautiful charts using Chart.js we will give you demo and example for implement.

Easy and beautiful charts using Chart.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 Chart.js and Vue.js

  • Simple to use, easy to extend
  • using the full power of chart.js
  • Easy for both beginners and pros





Read More Demo Download

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 Chart.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




Leave a Comment

Your email address will not be published. Required fields are marked *

4  +  5  =  

We accept paid advance and paid guest Posting on our Site : Contact US