Home

Awesome

v-chartist

A component of Chartist implements by vuejs 2.0

Installation

npm install v-chartist --save

or

bower install vue-chartist --save

Usage

import VueChartist from 'v-chartist';

new Vue({
    components: {
        'vue-chartist': VueChartist
    },
    template: '<vue-chartist :data="data" :options="options" type="Line"></vue-chartist>',
    data: function () {
        return {
            data: {
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
                series: [
                    [12, 9, 7, 8, 5],
                    [2, 1, 3.5, 7, 3],
                    [1, 3, 4, 5, 6]
                ]
            },
            options: {
                fullWidth: true,
                chartPadding: {
                    right: 40
                }
            }
        };
    }
});

Props

PropertyDescription
datathe data of chart
optionsthe options of chart
typethe type of chart, default Line
listenerthe listener of chart

See the document of Chartist for detail.

Contribution

First, install dependencies

npm install

Second, setup development environment

npm run dev

License

MIT