Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-schart with all npm packages installed. Try it out:

var vueSchart = require("vue-schart")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-schart v1.0.0

Vue.js wrapper for sChart.js

vue-schart

:bar_chart: Vue.js wrapper for sChart.js

Downloads Version License

Support for use at the mobile. Support vue.js 1.x & 2.x

interactive demo

Usage

Install:

npm install vue-schart -S

Use in component:

<template>
    <div id="app">
        <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
    </div>
</template>
<script>
import Schart from 'vue-schart';
    export default {
        data() {
            return {
                canvasId: 'myCanvas',
                type: 'bar',
                data: [
                    {name: '2014', value: 1342},
                    {name: '2015', value: 2123},
                    {name: '2016', value: 1654},
                    {name: '2017', value: 1795},
                ],
                options: {
                    title: 'Total sales of stores in recent years'
                }
            }
        },
        components:{
            Schart
        }
    }
</script>

<style>
.wrapper{
    width: 7rem;
    height: 5rem;
}
</style>

Options

Refer to the documentation for sChart.js.

Demo

demo

License

MIT license.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free