Vue Frappe Charts

This is a simple vue wrapper for the frappe/charts package.

Supports Vue.js version 2 and 3.

Getting Started

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']"
/>

Resources

• NPM vue-frappe-chart
• vue-frappe-chart Documentation
• Frappe Charts
• Vuejs