Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue chartist

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

A component of Chartist implements by vuejs 2.0.

Chartist is a simple responsive charts library. You can use this component to embed a chart in your vue app. Simply define the data in JSON (or get it using an ajax request) and the chart will show up.

Support: IE9, IE10, IE11, Firefox 31, Chrome 35, Safari 7, Safari 8, Android 4.3, Android 4.4, iOS Safari 6 and iOS Safari 7.


chartist

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
}
}
};
}
});

Contribution

First, install dependencies

npm install

Second, setup development environment
npm run dev

Github: http://github.com/lakb248/vue-chartist#readme


← vue tiny slider vue simple progress →

© vuejsexamples.net - Privacy Policy - Cookie Policy