UI Components > Charts


vue-chartist 0.14


A component of Chartist implement by vuejs 2.0
  • vue_component
  • vuejs
  • chartist
last commit 7 years ago
41
Stargazers

Watchers
41
Open issues
8
125541
Downloads

Last 30 days
3371
Releases
5
34
Final Score

Quality
45
Popularity
11
Maintenance
47

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

Property Description
data the data of chart
options the options of chart
type the type of chart, default Line
listener the 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