1.4.0 • Published 6 years ago
vue-chartsjs-es6 v1.4.0
vue-chartsjs-es6 
Based on Vue.js, wrapper for ChartJs.
- Vue js
- Chart js
- Works well with ES6 / Laravel Mix
Render a Chart Easily
- Single Line
- Multiple Bar
- Multiple Mix Chart
Features
- Single Chart
- Multiple Chart
- Multiple Mix Chart
- Override Datasets
- Override Option
- Pass Json data
- DataBinding & Auto Render
Document and Demo
Home page
Line
Bar
Horizontal Bar
Radar
Polar Area
Pie
Doughnut
DataBinding
Jsondata
NPM Package
Install
npm install vue-chartsjs-es6 or
yarn add vue-chartsjs-es6 Notice
- vue-charts base on Vue 2
- vue-charts base on Chart.js 2
How to use
Laravel Mix
open your app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
// vue-charts package
import Vue from 'vue'
import VueCharts from 'vue-chartsjs-es6'
import Example from './components/Example.vue'
Vue.use(VueCharts)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', Example)
const app = new Vue({
el: '#app'
})in your view
<body>
<div class="flex-center position-ref full-height">
<div id="app" class="content">
<!--line chart component-->
<chartjs-line></chartjs-line>
<div class="title m-b-md">
Laravel
</div>
<div class="links">
<a href="https://laravel.com/docs">Documentation</a>
<a href="https://laracasts.com">Laracasts</a>
<a href="https://laravel-news.com">News</a>
<a href="https://forge.laravel.com">Forge</a>
<a href="https://github.com/laravel/laravel">GitHub</a>
</div>
</div>
</div>
</body>
<!--set script src-->
<script src="{{mix('js/app.js')}}"></script>
Thanks
@hchstera - Original component, for laravel elixir
@yeknava - Horizontal Bar