README
vue-froalacharts
Simple and lightweight Vue component for FroalaCharts. vue-froalacharts
enables you to add JavaScript charts in your Vue application or project without any hassle.
- Github Repo: https://github.com/froala/vue-froalacharts
- Documentation: https://froala.com/charts/docs/frameworks/vue/
- Support: support@froala.com
- FroalaCharts
- Official Website: https://froala.com/
- Official NPM Package: https://www.npmjs.com/package/froalacharts
- Issues: https://github.com/froala/vue-froalacharts/issues
Table of Contents
Getting Started
Requirements
- Node.js, NPM/Yarn installed globally in your OS.
- FroalaCharts and Vue installed in your project, as detailed below:
Installation
Direct Download All binaries are located on our github repository.
Install from NPM
npm install vue-froalacharts --save
Install from Yarn
yarn add vue-froalacharts
Include in your script
Download vue-froalacharts.js
and include it in the HTML <script>
tag.
<script src="vue-froalacharts.js" type="text/javascript"></script>
Usage
There are two ways of adding vue-froalacharts
component in your project
Registering globally as a plugin
Import vue
, vue-froalacharts
and FroalaCharts in main app file.
import Vue from `vue`;
import VueFroalaCharts from 'vue-froalacharts';
// import FroalaCharts modules and resolve dependency
import FroalaCharts from 'froalacharts';
Now, register it as plugin in Vue object
Vue.use(VueFroalaCharts, FroalaCharts);
This way is recommended when you want component (vue-froalacharts
) available from everywhere in your app.
Registering locally in your component
Import the chart component from vue-froalacharts/component
package in your component file and use Vue.component
to register it locally.
import Vue from `vue`;
import VueFroalaChartsComponent from 'vue-froalacharts/component';
// import FroalaCharts modules and resolve dependency
import FroalaCharts from 'froalacharts';
const vueFroalaCharts = VueFroalaChartsComponent(FroalaCharts);
Vue.component('froalacharts', vueFroalaCharts);
This way is recommended when you want component (vue-froalacharts
) only in specific components of your app.
Where eventName
can be any FroalaCharts event. You can find the list of events at froalacharts docs
Quick Start
Here is a basic sample that shows how to create a chart using vue-froalacharts
:
import Vue from 'vue';
import VueFroalaCharts from 'vue-froalacharts';
import FroalaCharts from 'froalacharts';
// register VueFroalaCharts component
Vue.use(VueFroalaCharts, FroalaCharts);
const myDataSource = {
chart: {
caption: 'Recommended Portfolio Split',
subCaption: 'For a net-worth of $1M',
showValues: '1',
showPercentInTooltip: '0',
numberPrefix: '