vue-frappe

Introduction

This package is a Vue component wrapper for the popular Frappe Charts library.

Installation

Install the package via npm:

npm install vue-frappe

Or via yarn:

yarn add vue-frappe

Usage

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>

License

This package is open-sourced software licensed under the MIT license.

Credits

• Thanks to Steve McDougall and his package vue2-frappe