Introduction

FusionCharts is a JavaScript charting library which provides more than 95 charts and 2,000 maps which can be used fully in mobile and web applications. This library provides integrations for all popular JavaScript frameworks & back-end programming languages.

Getting Started

Note
NPM or Yarn must be installed globally on your local pc.

Installation Guide

Note
In the demo, for designing purposes, we used the simple bootstrap library.
Install from NPM or from Yarn
  1. npm install --save react-fusioncharts
  3. or
  5. yarn add react-fusioncharts

Start to integrate Fusion Chart Library in react app

  • Create a React app using your specific app name in the desired folder path, using the command create-react-app.
  • Once you create the React app successfully, there will be app.js file in the src folder.
  • Now, we need to import react-fusioncharts and FusionCharts in our app.js file.
  1. import React, {Component} from 'react';
  2. import FusionCharts from 'fusioncharts';
  3. import Charts from 'fusioncharts/fusioncharts.charts';
  4. import ReactFC from 'react-fusioncharts';
  5. import './index.css';
  6. import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  8. ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
Note
This way of importing will not work in IE11 and below.
Configuration setting for column chart
  1. type: 'column2d',
  2. width: '100%',
  3. dataFormat: 'json',
  4. dataSource: {
  5. "chart": {
  6. //Basic parameters
  7. "theme": "fusion",
  8. "palettecolors": "5d62b5,29c3be,f2726f",
  9. "caption": "Average Annual Population Growth",
  10. "subcaption": ' 1955-2015',
  11. "xAxisName": "Population",
  12. "yAxisName": "Growth",
  13. "numberSuffix": "K",
  14. "showBorder": "1",
  15. "borderColor": "#ccc",
  16. "bgColor": "#FFFFFF",
  18. //Tooltip customization
  19. "toolTipBorderColor": "#666666",
  20. "toolTipBgColor": "#efefef",
  21. "toolTipBgAlpha": "80",
  22. "showToolTipShadow": "1",
  24. //Theme
  25. "plotBorderThickness": "0.25",
  26. "showxaxispercentvalues": "1",
  27. "showValues": "1",
  28. "plotToolText": "Country: $label <br> Population : $dataValue"
  29. },
  30. "data": [] //data collection
  31. }
Data Source Collection
  1. "data": [{
  2. "label": "China",
  3. "value": "300"
  4. },
  5. {
  6. "label": "US",
  7. "value": "200"
  8. },
  9. {
  10. "label": "Russia",
  11. "value": "130"
  12. },
  13. {
  14. "label": "Canada",
  15. "value": "80"
  16. },
  17. {
  18. "label": "Iran",
  19. "value": "130"
  20. },
  21. {
  22. "label": "UAE",
  23. "value": "70"
  24. },
  25. {
  26. "label": "Saudi",
  27. "value": "50"
  28. },
  29. {
  30. "label": "India",
  31. "value": "140"
  32. }
  33. ]
This sample static data collection needs to pass in a configuration setting.
Attach the callback to an event through the React-FC component.
  1. <ReactFC {...chartConfigsSettings} />
Consider the example to integrate or implement a fusion chart in the React app.
  1. import React, {Component} from 'react';
  3. // import Fusion Charts library
  4. import FusionCharts from 'fusioncharts';
  5. import Charts from 'fusioncharts/fusioncharts.charts';
  6. import ReactFC from 'react-fusioncharts';
  7. import './index.css';
  8. import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  10. // import bootstrap css
  11. import 'bootstrap/dist/css/bootstrap.css';
  13. ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
  15. // column 2d chart configuration settings
  16. const chartConfigs_colunm2d = {
  17. type: 'column2d',
  18. width: '100%',
  19. dataFormat: 'json',
  20. dataSource: {
  21. "chart": {
  22. "theme": "fusion",
  23. "palettecolors": "5d62b5,29c3be,f2726f",
  24. "caption": "Average Annual Population Growth",
  25. "subcaption": ' 1955-2015',
  26. "xAxisName": "Population",
  27. "yAxisName": "Growth",
  28. "numberSuffix": "K",
  29. "showBorder": "1",
  30. "borderColor": "#ccc",
  31. "bgColor": "#FFFFFF",
  32. //Tooltip customization
  33. "toolTipBorderColor": "#666666",
  34. "toolTipBgColor": "#efefef",
  35. "toolTipBgAlpha": "80",
  36. "showToolTipShadow": "1",
  37. //Theme
  38. "plotBorderThickness": "0.25",
  39. "showxaxispercentvalues": "1",
  40. "showValues": "1",
  41. "plotToolText": "Country: $label <br> Population : $dataValue"
  42. },
  43. "data": [
  44. {
  45. "label": "China",
  46. "value": "300"
  47. },
  48. {
  49. "label": "US",
  50. "value": "200"
  51. },
  52. {
  53. "label": "Russia",
  54. "value": "130"
  55. },
  56. {
  57. "label": "Canada",
  58. "value": "80"
  59. },
  60. {
  61. "label": "Iran",
  62. "value": "130"
  63. },
  64. {
  65. "label": "UAE",
  66. "value": "70"
  67. },
  68. {
  69. "label": "Saudi",
  70. "value": "50"
  71. },
  72. {
  73. "label": "India",
  74. "value": "140"
  75. }
  76. ]
  77. },
  78. };
  80. // column 3d chart configuration settings
  81. const chartConfigs_colunm3d = {
  82. type: 'column3d',
  83. width: '100%',
  84. dataFormat: 'json',
  85. dataSource: {
  86. "chart": {
  87. "theme": "fusion",
  88. "palettecolors": "5d62b5,29c3be,f2726f",
  89. "caption": "Average Annual Population Growth",
  90. "subcaption": ' 1955-2015',
  91. "xAxisName": "Population",
  92. "yAxisName": "Growth",
  93. "numberSuffix": "K",
  94. "showBorder": "1",
  95. "borderColor": "#ccc",
  96. "bgColor": "#FFFFFF",
  97. //Tooltip customization
  98. "toolTipBorderColor": "#666666",
  99. "toolTipBgColor": "#efefef",
  100. "toolTipBgAlpha": "80",
  101. "showToolTipShadow": "1",
  102. //Theme
  103. "plotBorderThickness": "0.25",
  104. "showxaxispercentvalues": "1",
  105. "showValues": "1",
  106. "placeValuesInside": "1",
  107. "plotToolText": "Country: $label <br> Population : $dataValue"
  108. },
  109. "data": [
  110. {
  111. "label": "China",
  112. "value": "300"
  113. },
  114. {
  115. "label": "US",
  116. "value": "200"
  117. },
  118. {
  119. "label": "Russia",
  120. "value": "130"
  121. },
  122. {
  123. "label": "Canada",
  124. "value": "80"
  125. },
  126. {
  127. "label": "Iran",
  128. "value": "130"
  129. },
  130. {
  131. "label": "UAE",
  132. "value": "70"
  133. },
  134. {
  135. "label": "Saudi",
  136. "value": "50"
  137. },
  138. {
  139. "label": "India",
  140. "value": "140"
  141. }
  142. ]
  143. },
  144. };
  146. class App extends Component {
  147. render() {
  148. return (
  149. <div className="container">
  150. <div className="row">
  151. {/*Column 2D section*/}
  152. <div className="col-sm-6">
  153. <h3>Column 2D Chart</h3>
  154. <ReactFC {...chartConfigs_colunm2d} />
  155. </div>
  157. {/*Column 3D section*/}
  158. <div className="col-sm-6">
  159. <h3>Column 3D Chart</h3>
  160. <ReactFC {...chartConfigs_colunm3d} />
  161. </div>
  163. </div>
  164. </div>)
  165. }
  166. }
  168. export default App;
Official Links