Post
Ask Question

Implement Column Chart With Fusion Chart Library In ReactJS Application

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  
  2.   
  3. or  
  4.   
  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';  
  7.   
  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",  
  17.              
  18.            //Tooltip customization  
  19.            "toolTipBorderColor": "#666666",  
  20.            "toolTipBgColor": "#efefef",  
  21.            "toolTipBgAlpha": "80",  
  22.            "showToolTipShadow": "1",  
  23.              
  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';  
  2.   
  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';  
  9.   
  10. // import bootstrap css  
  11. import 'bootstrap/dist/css/bootstrap.css';  
  12.   
  13. ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);  
  14.   
  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. };  
  79.   
  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. };  
  145.   
  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>  
  156.   
  157.                     {/*Column 3D section*/}  
  158.                     <div className="col-sm-6">  
  159.                         <h3>Column 3D Chart</h3>  
  160.                         <ReactFC {...chartConfigs_colunm3d} />  
  161.                     </div>  
  162.   
  163.                 </div>  
  164.             </div>)  
  165.     }  
  166. }  
  167.   
  168. export default App; 
Official Links


Similar Articles