|
1 |
| -# react-fusioncharts |
| 1 | +A simple and lightweight official React component for FusionCharts JavaScript charting library. `react-fusioncharts` enables you to add JavaScript charts in your React application or project without any hassle. |
| 2 | + |
| 3 | +## [Demo](https://fusioncharts.github.io/react-fusioncharts-component/) |
| 4 | + |
| 5 | +- Github Repo: [https://github.com/fusioncharts/react-fusioncharts-component](https://github.com/fusioncharts/react-fusioncharts-component) |
| 6 | +- Documentation: [https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react) |
| 7 | +- Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support) |
| 8 | +- FusionCharts |
| 9 | + - Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/) |
| 10 | + - Official NPM Package: [https://www.npmjs.com/package/fusioncharts](https://www.npmjs.com/package/fusioncharts) |
| 11 | +- Issues: [https://github.com/fusioncharts/react-fusioncharts-component/issues](https://github.com/fusioncharts/react-fusioncharts-component/issues) |
| 12 | + |
| 13 | +--- |
| 14 | + |
| 15 | +## Table of Contents |
| 16 | + |
| 17 | +- [Getting Started](#getting-started) |
| 18 | + - [Requirements](#requirements) |
| 19 | + - [Installation](#installation) |
| 20 | + - [Usage](#usage) |
| 21 | + - [Working with chart API](#working-with-apis) |
| 22 | + - [Working with events](#working-with-events) |
| 23 | +- [Quick Start](#quick-start) |
| 24 | +- [Custom Components](#custom-components) |
| 25 | + - [Drill Down](#drill-down-component) |
| 26 | +- [Going Beyond Charts](#going-beyond-charts) |
| 27 | +- [For Contributors](#for-contributors) |
| 28 | +- [Licensing](#licensing) |
2 | 29 |
|
3 |
| -A simple and lightweight `React` component which provides bindings for `FusionCharts` JavaScript Charting Library. It easily adds rich and interactive charts to any `React` Projects. |
| 30 | +## Getting Started |
| 31 | + |
| 32 | +### Requirements |
| 33 | + |
| 34 | +- **Node.js**, **NPM/Yarn** installed globally in your OS. |
| 35 | +- **FusionCharts** and **React** installed in your project, as detailed below: |
| 36 | + |
| 37 | +### Installation |
4 | 38 |
|
5 |
| -## Installation |
| 39 | +There are multiple ways to install `react-fusioncharts` component. |
6 | 40 |
|
7 |
| -To install `react-fusioncharts`, run: |
| 41 | +**Direct Download** |
| 42 | +All binaries are located on our [github repository](https://github.com/fusioncharts/react-fusioncharts-component). |
8 | 43 |
|
9 |
| -```bash |
10 |
| -$ npm install react-fusioncharts --save |
| 44 | +**Install from NPM** |
| 45 | + |
| 46 | +``` |
| 47 | +npm install --save react-fusioncharts |
11 | 48 | ```
|
12 | 49 |
|
13 |
| -Also install `fusioncharts`, if it is not already installed: |
| 50 | +See [npm documentation](https://docs.npmjs.com/) to know more about npm usage. |
| 51 | + |
| 52 | +**Install from Yarn** |
14 | 53 |
|
15 |
| -```bash |
16 |
| -$ npm install fusioncharts --save |
| 54 | +``` |
| 55 | +yarn add react-fusioncharts |
17 | 56 | ```
|
18 | 57 |
|
19 |
| -## Getting Started |
| 58 | +See [yarn documentation](https://yarnpkg.com/en/docs) to know more about yarn usage. |
20 | 59 |
|
21 |
| -After installing `react-fusioncharts`, import it in your `React` app: |
| 60 | +For general instructions, refer to this [developer docs page](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react#installation-2). |
22 | 61 |
|
23 |
| -```javascript |
| 62 | +### Usage |
| 63 | + |
| 64 | +Import React, `react-fusioncharts` and FusionCharts in your app: |
| 65 | + |
| 66 | +``` |
24 | 67 | import React from 'react';
|
25 | 68 | import ReactDOM from 'react-dom';
|
26 | 69 | import FusionCharts from 'fusioncharts';
|
| 70 | +import ReactFC from 'react-fusioncharts'; |
| 71 | +
|
| 72 | +ReactFC.fcRoot(FusionCharts); |
| 73 | +``` |
| 74 | + |
| 75 | +## Quick Start |
| 76 | + |
| 77 | +Here is a basic sample that shows how to create a chart using `react-fusioncharts`: |
| 78 | + |
| 79 | +``` |
| 80 | +import React from 'react; |
| 81 | +import ReactDOM from 'react-dom'; |
| 82 | +import FusionCharts from 'fusioncharts'; |
27 | 83 | import Charts from 'fusioncharts/fusioncharts.charts';
|
28 | 84 | import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
|
29 | 85 | import ReactFC from 'react-fusioncharts';
|
30 | 86 |
|
31 | 87 | ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
|
32 | 88 |
|
33 |
| -// DataSource A |
34 | 89 | const dataSource = {
|
35 | 90 | chart: {
|
36 | 91 | caption: 'Countries With Most Oil Reserves [2017-18]',
|
@@ -208,7 +263,7 @@ class Chart extends Component {
|
208 | 263 | ReactDOM.render(<Chart />, document.getElementById('root'));
|
209 | 264 | ```
|
210 | 265 |
|
211 |
| -## DrillDown Component |
| 266 | +## Drill Down Component |
212 | 267 |
|
213 | 268 | A custom component to easily add drill down to your react application.
|
214 | 269 |
|
@@ -355,32 +410,32 @@ class Chart extends Component {
|
355 | 410 | ReactDOM.render(<Chart />, document.getElementById('root'));
|
356 | 411 | ```
|
357 | 412 |
|
358 |
| -## Test |
| 413 | +links to help you get started: |
359 | 414 |
|
360 |
| -```sh |
361 |
| -$ npm test |
362 |
| -``` |
| 415 | +- [Live samples with code](https://fusioncharts.github.io/react-fusioncharts-component/) |
| 416 | +- [Documentation](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react) |
| 417 | +- [Use Chart API events & methods in React](https://www.fusioncharts.com/dev/getting-started/react/configure-your-chart-using-react) |
| 418 | +- [Chart gallery](https://www.fusioncharts.com/explore/chart-gallery) |
| 419 | +- [FusionCharts API](https://www.fusioncharts.com/dev/api/fusioncharts) |
363 | 420 |
|
364 |
| -## Contributing |
| 421 | +## Going Beyond Charts |
365 | 422 |
|
366 |
| -We are actively accepting pull requests. For contributions create a pull request to the `develop` branch with the necessary details. |
| 423 | +- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations [here](https://www.fusioncharts.com/explore/dashboards). |
| 424 | +- See [Data Stories](https://www.fusioncharts.com/explore/data-stories) built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories. |
367 | 425 |
|
368 |
| -- Clone the repository. |
369 |
| -- Install dependencies |
370 |
| -- Run `npm start` to start the dev server. |
371 |
| -- Open `http://localhost:5000/` in your browser. |
| 426 | +## For Contributors |
372 | 427 |
|
373 |
| -```sh |
| 428 | +- Clone the repository and install dependencies |
| 429 | + |
| 430 | +``` |
374 | 431 | $ git clone https://github.com/fusioncharts/react-fusioncharts-component.git
|
375 | 432 | $ cd react-fusioncharts-component
|
376 | 433 | $ npm i
|
377 | 434 | $ npm start
|
378 | 435 | ```
|
379 | 436 |
|
380 |
| -To build, run: |
| 437 | +- Run `npm run build` to start the dev server and point your browser at [http://localhost:3000/](http://localhost:3000/). |
381 | 438 |
|
382 |
| -```sh |
383 |
| -$ npm run build |
384 |
| -``` |
| 439 | +## Licensing |
385 | 440 |
|
386 |
| -### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/) |
| 441 | +The FusionCharts React component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy). |
0 commit comments