This is a simple vue wrapper for the frappe/charts package.
Install via npm
:
npm install vue-frappe-chart
Globally import / initialize:
import Vue from 'vue'
import Chart from 'vue-frappe-chart'
Vue.use(Chart)
or use the component directly:
import { VFrappeChart } from 'vue-frappe-chart'
export default {
components: {
VFrappeChart,
}
}
In our template:
<v-frappe-chart
type="bar"
:labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
:data="[
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
]"
:colors="['red']"
/>
Author: carterbourette
Demo: https://carterbourette.ca/vue-frappe-chart/
Source Code: https://github.com/carterbourette/vue-frappe-chart
#vue #vuejs #javascript