diff --git a/README.md b/README.md index 24a6229..c9d54e3 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ -# Vue-FusionCharts -> FusionCharts component for Vue +#### [Demos and Documentation](https://fusioncharts.github.io/vue-fusioncharts/) + +# Vue-FusionCharts -The Vue-FusionCharts component lets you easily include FusionCharts in your Vue.js projects. +A simple and lightweight `VueJS` component for `FusionCharts` JavaScript Charting Library. The `Vue-FusionCharts` wrapper lets you easily include FusionCharts in your `VueJS` projects. ## Installation @@ -18,17 +19,17 @@ npm install vue-fusioncharts --save yarn add vue-fusioncharts ``` -### manual +### VanillaJS -Download [`vue-fusioncharts.js`](https://github.com/fusioncharts/vue-fusioncharts/blob/feature/plugin-development/dist/vue-fusioncharts.js) and include it in the HTML ` + ``` -## Usage +## Getting Started -### ES6 Modules (Recommended) +### ES6 Module ```js import Vue from 'vue'; @@ -39,22 +40,21 @@ import FusionCharts from 'fusioncharts' import Charts from 'fusioncharts/fusioncharts.charts' // resolve charts dependency -Chart(FusionCharts); +Charts(FusionCharts); // register VueFusionCharts component Vue.use(VueFusionCharts, FusionCharts); ``` -### CommonJS Modules +### CommonJS ```js -var Vue = require('vue'); - -var VueFusionCharts = require('vue-fusioncharts'); +const Vue = require('vue'); +const VueFusionCharts = require('vue-fusioncharts'); // import FusionCharts modules and resolve dependency -var FusionCharts = require('fusioncharts'); -var Charts = require('fusioncharts/fusioncharts.charts'); +const FusionCharts = require('fusioncharts'); +const Charts = require('fusioncharts/fusioncharts.charts'); // resolve charts dependency Charts(FusionCharts); @@ -63,7 +63,6 @@ Charts(FusionCharts); Vue.use(VueFusionCharts, FusionCharts); ``` - ### AMD ```js @@ -83,9 +82,9 @@ require(['vue', 'vue-fusioncharts', 'fusioncharts', 'charts'], function (Vue, Vu }); ``` -### Standalone / CDN -If you are not using any bundler, you can refer the file in a script tag. The library will be available in a global object named `VueFusionCharts`. +### VanillaJS +If you are not using any bundler, you can refer the file in a script tag. The library will be available in a global object named `VueFusionCharts`. ```html @@ -96,52 +95,46 @@ If you are not using any bundler, you can refer the file in a script tag. The li -
- -

The value that you have selected is: {{displayValue}}

+ +
+ + +

Display Value: {{displayValue}}

- - @@ -149,24 +142,31 @@ If you are not using any bundler, you can refer the file in a script tag. The li ``` Click [here](https://jsfiddle.net/rohitcoolblog/5Lt720a9/) to view the live example. -## Register `vue-fusioncharts` component -### Use the `Vue.use` global method to register the component globally +## Register `vue-fusioncharts` Component + +### Register Globally + +Use the `Vue.use` method to register the component globally. + ```js Vue.use(VueFusionCharts, FusionCharts, Charts); ``` -### Use the `Vue.component` method to register the component locally + +### Register Locally + +Use the `Vue.component` method to register the component locally. + ```js // es6 style -import {FCComponent} from 'vue-fusioncharts' +import { FCComponent } from 'vue-fusioncharts' // CommpnJS -var FCComponent = require('vue-fusioncharts').FCComponent; +const FCComponent = require('vue-fusioncharts').FCComponent; Vue.component('fusioncharts', FCComponent); - ``` -### props +### Component Props * `options` @@ -221,11 +221,10 @@ Vue.component('fusioncharts', FCComponent); +## Contributing - -## Development * Clone the repository. -* Install dependency. +* Install dependencies * Run `npm start` to start the dev server. * Open `http://localhost:8080/` in your browser. @@ -236,3 +235,4 @@ $ npm install $ npm start ``` +### [Demos and Documentation](https://fusioncharts.github.io/vue-fusioncharts/)