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
  • Installation
  • Usage
• Quick Start
• For Contributors
• Licensing

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: '$',
    enableMultiSlicing: '1',
    theme: 'froala'
  },
  data: [
    {
      label: 'Equity',
      value: '300000'
    },
    {
      label: 'Debt',
      value: '230000'
    },
    {
      label: 'Bullion',
      value: '180000'
    },
    {
      label: 'Real-estate',
      value: '270000'
    },
    {
      label: 'Insurance',
      value: '20000'
    }
  ]
};

const chart = new Vue({
  el: '#app',
  data: {
    type: 'pie',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: myDataSource
  }
});

Here's HTML template for the above example:

<div id="app">
  <froalacharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
  >
  </froalacharts>
</div>

links to help you get started:

• Documentation
• FroalaCharts API
• Chart gallery

For Contributors

• Clone the repository and install dependencies

$ git clone https://github.com/froala/vue-froalacharts.git
$ cd vue-froalacharts
$ npm install

• Run npm start to start the dev server and point your browser at http://localhost:8080/.

Licensing

The FroalaCharts Vue component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FroalaCharts library in your page separately, which has a separate license.