hchs-vue-charts

Base on Vue2.0 wrapper for ChartJs. (Deprecated)

Showing:

Popularity

Downloads/wk

1.4K

GitHub Stars

368

Maintenance

Last Commit

1yr ago

Contributors

4

Package

Dependencies

2

Size (min+gzip)

2.2KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Vue Chart

Reviews

Top Feedback

1Poor Documentation

Readme

Deprecated Package

🔥 This package is no longer maintain. 🔥

vue-charts Package Quality

Base on Vue2, wrapper for ChartJs.

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]

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!

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation1
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
TarekEgypt2 Ratings0 Reviews
UI/UX Designer & Front-End Developer
July 4, 2020
Poor Documentation

Tutorials

No tutorials found
Add a tutorial