Base on Vue2, wrapper for ChartJs.
- Single Line
- Multiple Bar
- Multiple Mix Chart
- Single Chart
- Multiple Chart
- Multiple Mix Chart
- Override Datasets
- Override Option
- Pass Json data
- DataBinding & Auto Render
Home page
Line
Bar
Horizontal Bar
Radar
Polar Area
Pie
Doughnut
DataBinding
Jsondata
npm install hchs-vue-charts
or
yarn add hchs-vue-charts
- vue-charts base on Vue 2
- vue-charts base on Chart.js 2
1.build a page
<body>
<div id="app">
<chartjs-line></chartjs-line>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.js"></script>
<script src="js/vue-charts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
<script type="text/javascript">
Vue.use(VueCharts);
const app = new Vue({
el: '#app',
});
</script>2.Done!
dist&CDN Demo
1.Checkout your gulpfile.js in your laravel project
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js'); // we just need to require 'hchs-vue-charts' in this file or somewhere else
});2.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.
*/
//By default the bootstrap file will require('vue');
require('./bootstrap');
// chartjs package
require('chart.js');
// vue-charts package
require('hchs-vue-charts');
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', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});3.run gulp in your laravel project
gulp
4.modify your wellcome.blade.php or where you want to show the chart
- give vue root id
- add line chart component
- don't forget your script source
<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="{{asset('js/app.js')}}"></script>5.Done
@yeknava - Horizontal Bar