A simple wrapper around Frappe Charts for VueJS

by Vue.js Examples

Vue 2 Frappe Charts

This is a simple package to get using Frappe Charts within VueJS.

View demo Download Source

How to use

First we need to import and initialize

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

Vue.use(Chart)

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'
            ]"
            title="My Awesome Chart"
            type="axis-mixed"
            :height="300"
            :colors="['purple', '#ffa3ef', 'light-blue']"
            :dataSets="this.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]
                }]
            }
        }
    }
</script>

GitHub