Vue 2 Frappe Charts

This is a simple (even simplier than original) package to get using Frappe Charts within VueJS

Thanks to Steve McDougall (@JustSteveKing) for creating this project. The change I made was to remove must of the options from component properties and added a general-purpose-property options to bind the chart options. This way we don't need to wait the maintainer to add new options every time Charts gets updated with new ones.

How to install

npm install -d @digitalento/vue2-frappe

How to use

First we need to import and initialize

import Vue from 'vue'
import Chart from 'vue2-frappe'

Vue.use(Chart)

or use the component directly

import { VueFrappe } from 'vue2-frappe'

export default {
  components: {
    VueFrappe,
  },
};

Then in our Vue templates:

<template>
    <vue-frappe
            id="test"
            :labels="[
                '12am-3am', '3am-6am', '6am-9am', '9am-12pm',
                '12pm-3pm', '3pm-6pm', '6pm-9pm', '9pm-12am'
            ]"
            :options="chartOptions"
            :dataSets="data">
        </vue-frappe>
</template>
<script>
    export default {
        data () {
            return {
                data: [{
                    name: "Some Data", chartType: 'bar',
                    values: [25, 40, 30, 35, 8, 52, 17, -4]
                },
                {
                    name: "Another Set", chartType: 'bar',
                    values: [25, 50, -10, 15, 18, 32, 27, 14]
                },
                {
                    name: "Yet Another", chartType: 'line',
                    values: [15, 20, -3, -15, 58, 12, -17, 37]
                }],
                chartOptions: {
                    title: "My Awesome Chart",
                    type: "axis-mixed",
                    height: 300,
                    colors: ['purple', '#ffa3ef', 'light-blue'],
                },
            }
        }
    }
</script>

There are more examples in the examples directory

Links

Frappe Charts

Vue JS