You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
### [Demos and Documentation](http://fusioncharts.github.io/react-fusioncharts/)
2
+
3
+
## Introduction
4
+
5
+
FusionCharts Suite XT is a front-end, JavaScript-based, comprehensive collection of 90+ charts and 1000+ maps. This includes basic and complex charts like the column and bar charts, pie and doughnut charts, treemap, heatmap, logarithmic charts, and so on; gauges like the angular gauge, bulb gauge, thermometer gauge, and so on; and maps for all continents, major countries, and all US states.
6
+
7
+
The **react-fusioncharts** plugin, along with FusionCharts Suite XT, lets you add interactive JavaScript charts and graphs to your web and mobile applications using only a single ReactJS component.
8
+
9
+
This article outlines the steps to be executed for rendering charts using the **react-fusioncharts** plugin.
#### Step 2: Add the HTML container element for rendering the chart
25
+
26
+
In your HTML, find the section where you wish to render the chart place a `<div>` for the FusionCharts to be rendered.
27
+
28
+
`<div id='chart-container'></div>`
29
+
30
+
#### Step 3: Import react-fusioncharts package from npm
31
+
32
+
Import **react**, **react-dom**, **fusioncharts**, and **react-fusioncharts** modules, in this order, through npm. In your JavaScript code, define an object that consists of all the configurations and their values, required to render FusionCharts.
33
+
34
+
```
35
+
import React from 'react';
36
+
import ReactDOM from 'react-dom';
37
+
import fusioncharts from 'fusioncharts';
38
+
// Load the charts module
39
+
import charts from 'fusioncharts/fusioncharts.charts';
40
+
import react-fusioncharts from 'react-fusioncharts';
41
+
42
+
// Pass fusioncharts as a dependency of charts
43
+
charts(FusionCharts)
44
+
45
+
var chartConfigs = {
46
+
type: ...,
47
+
renderAt: ...,
48
+
className: ..., // ReactJS attribute-name for DOM classes
49
+
dataFormat: ...,
50
+
dataSource: ...
51
+
};
52
+
```
53
+
54
+
#### Step 4: Pass the configurations required for FusionCharts and render the chart
55
+
##### FusionCharts plugin for **react** can be used in two ways:
56
+
1. Use the **ReactFC** component directly in **ReactDOM** to render the chart. The configurations are passed as props of the component.
57
+
2. Create multiple **ReactFC** component inside your custom defined component to render individual charts. This way you would be able to hold the state in your custom component and will be able to perform various activities using the component’s lifecycle hooks.
58
+
59
+
##### Method 1:
60
+
Render the chart in the **React** application for a standalone chart, we can choose to make a component class or directly render the chart with the **ReactFC** component class. The object containing the chart configuration properties are passed to the **FusionCharts** component as props, as shown below:
61
+
62
+
```
63
+
ReactDOM.render(
64
+
<ReactFC {...chartConfigs} />,
65
+
document.getElementById('chart-container')
66
+
);
67
+
```
68
+
69
+
##### Method 2:
70
+
Create a custom MyApp component to render the chart as shown below:
71
+
72
+
```
73
+
var MyApp = React.createClass({
74
+
..., // Rest of the React Component Code
75
+
render: function () {
76
+
return (
77
+
<ReactFC {...categoryChartConfigs} />
78
+
<ReactFC {...revenueChartConfigs} />
79
+
);
80
+
}
81
+
});
82
+
83
+
ReactDOM.render(
84
+
<MyApp />,
85
+
document.getElementById('chart-container')
86
+
);
87
+
```
88
+
89
+
While it is recommended to create an object, with the configuration properties, and passing the values defined, you can also pass the configuration properties separately as shown below:
90
+
91
+
```
92
+
ReactDOM.render(
93
+
<ReactFC
94
+
type: ...,
95
+
renderAt: ...,
96
+
className: ...,
97
+
dataFormat: ...,
98
+
dataSource: ... />,
99
+
document.getElementById('chart-container')
100
+
);
101
+
```
102
+
103
+
Your chart should now render when the page is loaded.
104
+
105
+
### Licensing
106
+
React-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can [Download an evaluation](http://fusioncharts.com/download/). You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is [free for non-commercial and personal use](http://www.fusioncharts.com/download/free/)) .
function_classCallCheck(instance,Constructor){if(!(instanceinstanceofConstructor)){thrownewTypeError('Cannot call a class as a function');}}
16
+
17
+
function_inherits(subClass,superClass){if(typeofsuperClass!=='function'&&superClass!==null){thrownewTypeError('Super expression must either be null or a function, not '+typeofsuperClass);}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor: {value: subClass,enumerable: false,writable: true,configurable: true}});if(superClass)Object.setPrototypeOf ? Object.setPrototypeOf(subClass,superClass) : subClass.__proto__=superClass;}
0 commit comments