❤
npm
Sign UpSign In

hchs-vue-charts

1.2.8 • Public • Published

vue-charts

Base on Vue2, wrapper for ChartJs.
-Vue js
-Chart js
-Work well with Laravel

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

NPM Package

Install

npm install hchs-vue-charts

or

yarn add hchs-vue-charts

Notice

  • vue-charts base on Vue 2
  • vue-charts base on Chart.js 2

How to use --- dist & CDN

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

How to use --- Laravel Elixir

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

Thanks

@yeknava - Horizontal Bar

Dependents (4)

Package Sidebar

Install

npm i hchs-vue-charts

Repository

github.com/hchstera/vue-charts

Homepage

github.com/hchstera/vue-charts#readme

Weekly Downloads

218

Version

1.2.8

License

MIT

Last publish

Collaborators

  • g9308370
Try on RunKit
Report malware