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
In your HTML, find the section where you wish to render the chart place a `<div>` for the FusionCharts to be rendered.
27
27
`<div id='chart-container'></div>`
28
28
29
-
#### Step 3: Require react-fusioncharts package from npm
29
+
#### Step 3: Import react-fusioncharts package from npm
30
30
31
-
Require**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.
31
+
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.
32
32
33
33
```
34
34
import React from 'react';
@@ -47,20 +47,22 @@ var chartConfigs = {
47
47
```
48
48
49
49
#### Step 4: Pass the configurations required for FusionCharts and render the chart
50
-
##### FusionCharts plugin for react cab be used in two ways.
51
-
1. Use the ReactFC component directly in ReactDOM to render the chart. The configurations are passed as props of the component.
52
-
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 defined component and will be able to perform various activities using the component’s lifecycle hooks.
50
+
##### FusionCharts plugin for **react** can be used in two ways:
51
+
1. Use the **ReactFC** component directly in **ReactDOM** to render the chart. The configurations are passed as props of the component.
52
+
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.
53
53
54
54
##### Method 1:
55
-
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:
55
+
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:
56
+
56
57
```
57
58
ReactDOM.render(
58
59
<ReactFC {...chartConfigs} />,
59
60
document.getElementById('chart-container')
60
61
);
61
62
```
63
+
62
64
##### Method 2:
63
-
Creating a custom MyApp component to render the chart
65
+
Create a custom MyApp component to render the chart as shown below:
64
66
65
67
```
66
68
var MyApp = React.createClass({
@@ -78,7 +80,9 @@ ReactDOM.render(
78
80
document.getElementById('chart-container')
79
81
);
80
82
```
81
-
While the previous method of creating an object, with the configuration properties and values defined, and passing it is recommended, the configuration properties can be passed separately as well, as shown below:
83
+
84
+
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:
85
+
82
86
```
83
87
ReactDOM.render(
84
88
<ReactFC
@@ -90,6 +94,7 @@ ReactDOM.render(
90
94
document.getElementById('chart-container')
91
95
);
92
96
```
97
+
93
98
Your chart should now render when the page is loaded.
Copy file name to clipboardExpand all lines: example/src/index.html
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -109,8 +109,8 @@ <h3>Step 2: Add the HTML container element for rendering the chart</h3>
109
109
<p>In your HTML, find the section where you wish to render the chart place a <codeclass="language-markup" ><div></code> for the FusionCharts to be rendered.</p>
<h3>Step 3: Require react-fusioncharts package from npm</h3>
113
-
<p>Require<codeclass="language-javascript" >react</code>, <codeclass="language-javascript" >react-dom</code>, <codeclass="language-javascript" >fusioncharts</code>, and <codeclass="language-javascript" >react-fusioncharts</code> 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.</p>
112
+
<h3>Step 3: Import react-fusioncharts package from npm</h3>
113
+
<p>Import<codeclass="language-javascript" >react</code>, <codeclass="language-javascript" >react-dom</code>, <codeclass="language-javascript" >fusioncharts</code>, and <codeclass="language-javascript" >react-fusioncharts</code> 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.</p>
114
114
<preclass="language-javascript" >
115
115
<codeclass="language-javascript" >import React from 'react';
<h3>Step 4: Pass the configurations required for FusionCharts and render the chart</h3>
130
130
131
-
<p>FusionCharts plugin for react can be used in two ways.</p>
132
-
<p><b>1. </b>Use the ReactFC component directly in ReactDOM to render the chart. The configurations are passed as props of the component.</p>
133
-
<p><b>2. </b>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 defined component and will be able to perform various activities using the component’s lifecycle hooks.</p>
131
+
<p>FusionCharts plugin for <codeclass="language-javascript" >react</code> can be used in two ways.</p>
132
+
<p><b>1. </b>Use the <codeclass="language-javascript" >ReactFC</code> component directly in <codeclass="language-javascript" >ReactDOM</code> to render the chart. The configurations are passed as props of the component.</p>
133
+
<p><b>2. </b>Create multiple <codeclass="language-javascript" >ReactFC</code> component inside your custom defined component to render individual charts. This way you would be able to hold the state in your custom defined component and will be able to perform various activities using the component’s lifecycle hooks.</p>
134
134
<p> </p>
135
-
<b>Method 1:</b> Render the chart in the React application
136
-
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
135
+
<b>Method 1:</b> Render the chart in the <codeclass="language-javascript" >React</code> application
136
+
for a standalone chart, we can choose to make a component class or directly render the chart with the <codeclass="language-javascript" >ReactFC</code> component class. The object containing the chart configuration properties are passed to the FusionCharts component as props, as shown below
@@ -158,7 +158,7 @@ <h3>Step 4: Pass the configurations required for FusionCharts and render the cha
158
158
);
159
159
</code></pre>
160
160
<p> </p>
161
-
<p>While the previous method of creating an object, with the configuration properties and values defined, and passing it is recommended, the configuration properties can be passed separately as well, as shown below</p>
161
+
<p>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:</p>
0 commit comments