This package is a Vue component wrapper for the popular Frappe Charts library.
Install the package via npm:
npm install vue-frappe
Or via yarn:
yarn add vue-frappe
Import and create a chart in your Vue component:
<template>
<vue-frappe
id="chart"
title="A statistical chart"
type="axis-mixed"
:labels="[
'12am-3am', '3am-6am', '6am-9am', '9am-12pm',
'12pm-3pm', '3pm-6pm', '6pm-9pm', '9pm-12am'
]"
:height="300"
:colors="['#03a87c', '#ffa3ef']"
:dataSets="this.data">
</vue-frappe>
</template>
<script>
import VueFrappe from 'vue-frappe'
export default {
components: {
VueFrappe
}
data() {
return {
data: [
{
name: 'Bar Chart',
chartType: 'bar',
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: 'Line Chart',
chartType: 'line',
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
};
}
};
</script>
This package is open-sourced software licensed under the MIT license.