Skip to content

Commit 4f35d65

Browse files
committed
Merge branch 'release/2.0.7'
2 parents b0c55f5 + 0e86cd0 commit 4f35d65

File tree

2 files changed

+86
-31
lines changed

2 files changed

+86
-31
lines changed

README.md

Lines changed: 85 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,91 @@
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)
229

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
438

5-
## Installation
39+
There are multiple ways to install `react-fusioncharts` component.
640

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).
843

9-
```bash
10-
$ npm install react-fusioncharts --save
44+
**Install from NPM**
45+
46+
```
47+
npm install --save react-fusioncharts
1148
```
1249

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**
1453

15-
```bash
16-
$ npm install fusioncharts --save
54+
```
55+
yarn add react-fusioncharts
1756
```
1857

19-
## Getting Started
58+
See [yarn documentation](https://yarnpkg.com/en/docs) to know more about yarn usage.
2059

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).
2261

23-
```javascript
62+
### Usage
63+
64+
Import React, `react-fusioncharts` and FusionCharts in your app:
65+
66+
```
2467
import React from 'react';
2568
import ReactDOM from 'react-dom';
2669
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';
2783
import Charts from 'fusioncharts/fusioncharts.charts';
2884
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
2985
import ReactFC from 'react-fusioncharts';
3086
3187
ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
3288
33-
// DataSource A
3489
const dataSource = {
3590
chart: {
3691
caption: 'Countries With Most Oil Reserves [2017-18]',
@@ -208,7 +263,7 @@ class Chart extends Component {
208263
ReactDOM.render(<Chart />, document.getElementById('root'));
209264
```
210265

211-
## DrillDown Component
266+
## Drill Down Component
212267

213268
A custom component to easily add drill down to your react application.
214269

@@ -355,32 +410,32 @@ class Chart extends Component {
355410
ReactDOM.render(<Chart />, document.getElementById('root'));
356411
```
357412

358-
## Test
413+
links to help you get started:
359414

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)
363420

364-
## Contributing
421+
## Going Beyond Charts
365422

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.
367425

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
372427

373-
```sh
428+
- Clone the repository and install dependencies
429+
430+
```
374431
$ git clone https://github.com/fusioncharts/react-fusioncharts-component.git
375432
$ cd react-fusioncharts-component
376433
$ npm i
377434
$ npm start
378435
```
379436

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/).
381438

382-
```sh
383-
$ npm run build
384-
```
439+
## Licensing
385440

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).

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-fusioncharts",
3-
"version": "2.0.6",
3+
"version": "2.0.7",
44
"description": "Simple and Lightweight React component for FusionCharts JavaScript Charting Library",
55
"main": "lib/ReactFC.js",
66
"author": {

0 commit comments

Comments
 (0)