Table of Contents
Apps | Downloads |
---|---|
Sarahah | 3880000 |
Messenger | 2570000 |
Snake vs. Block | 2420000 |
2140000 | |
Amazon | 1830000 |
Spotify Music | 1540000 |
Netflix | 1530000 |
Word Connect | 1440000 |
Pandora | 1300000 |
WhatsApp Messenger | 1210000 |
{ "label": "Sarahah", "value": "3880000" }, { "label": "Messenger", "value": "2570000" }, { "label": "Snake vs Block", "value": "2420000" }, { "label": "Facebook", "value": "2140000" }, { "label": "Amazon", "value": "1830000" }, { "label": "Spotify Music", "value": "1540000" }, { "label": "Netflix", "value": "1530000" }, { "label": "Word Connect", "value": "1440000" }, { "label": "Pandora", "value": "1300000" }, { "label": "WhatsApp Messenger", "value": "1210000" }
fusioncharts.js
and the react-fusioncharts.js
script source links in the `head` of your HTML page, as shown in the code snippet below: <html> <head> <title>Top 10 iOS Apps in July 2017</title> <script type="text/javascript" src="https://unpkg.com/react@latest/dist/react.js"></script> <script type="text/javascript" src="http://fb.me/JSXTransformer-0.13.3.js"></script> <script type="text/javascript" src="https://unpkg.com/react@15.6.0/dist/react.min.js"></script> <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script type="text/javascript" src="http://unpkg.com/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="http://unpkg.com/fusioncharts/fusioncharts.charts.js"></script> <script type="text/javascript" src="http://unpkg.com/fusioncharts@3.12.1/themes/fusioncharts.theme.ocean.js"></script> <script type="text/javascript" src="http://unpkg.com/react-fusioncharts/dist/react-fusioncharts.js"></script> </head> </html>To avoid misrepresentation, you must add the
react-fusioncharts.js
file after adding all other scripts. Or, you can install the React-FusionCharts Component using NPM. However, the installation and rendering process would differ for this method. For NPM, you will have to first render install the ReactJS and FusionCharts packages. Next, you’ll have to load the FusionCharts and Charts modules using the `require` command. You can read more on installing via npm. Power up: You can do the entire setup by running just one command: `npm install react react-dom fusioncharts react-fusioncharts –save`. var myDataSource = { chart: { caption: "Top 10 iOS Apps - July 2017", subCaption: "Downloads (In Millions)", "canvasBgAlpha": "0", "bgColor": "#ffffff", "bgAlpha": "70", "baseFont": "Roboto", "baseFontSize": "14", "showAlternateVGridColor": "1", "alternateVGridAlpha": "5", "labelFontSize": "15", "captionFontSize": "20", "subCaptionFontSize": "16", "toolTipColor": "#000000", "toolTipBgColor": "#ffffff", "toolTipAlpha": "90", "captionFontBold": "0", "subCaptionFontBold": "0", "paletteColors": "#8E24AA", "valueFontSize": "13", "valueFontBold": "0", "animation": "0", "divLineAlpha": "15", "divLineDashed": "0", "plotFillAlpha": "90", theme: "ocean" }, "data": [{ "label": "Sarahah", "value": "3880000" }, { "label": "Messenger", "value": "2570000" }, { "label": "Snake vs Block", "value": "2420000" }, { "label": "Facebook", "value": "2140000" }, { "label": "Amazon", "value": "1830000" }, { "label": "Spotify Music", "value": "1540000" }, { "label": "Netflix", "value": "1530000" }, { "label": "Word Connect", "value": "1440000" }, { "label": "Pandora", "value": "1300000" }, { "label": "WhatsApp Messenger", "value": "1210000" }] }; var barChartConfigs = { id: "bar-chart", renderAt: "chart-container", type: "bar2d", width: "100%", height: 400, dataFormat: "json", dataSource: myDataSource }; var MyApp = React.createClass({ render: function() { return ( <div id="chart-container"></div> ); } });The chart `id` and the `renderAt` objects in the Chart Configuration define the chart and the rendering element, respectively. `type`: attribute defines the JS chart alias to render. The bar chart is just one of the many chart types supported by the FusionCharts Suite. For the complete list of chart types supported by FusionCharts, you can refer to the list of charts. The `width` and `height` define the size of the chart canvas. Since we are using the JSON data, the `dataFormat` is set to
JSON
. bgColor
– Select the background color of the chart. showAlternateVGridColor
– Creates alternating vertical grid bands by setting it to `1`. paletteColors
– Assigns colors to be used in the chart elements. Animation
– Selects chart animations on loading the chart. divLineDashed
– Makes the divisional lines dashed by setting it to `1`. plotFillAlpha
– Sets the transparency of the data objects in the chart. baseFont
– Selects any standard/non-standard font family for the text used in the chart baseFontSize
– Sets the font size of the values and text in the chart valueFontSize
– Sets the font size of the values toolTipColor
– Changes the color of the text in the tooltip toolTipBgColor
– Changes the color of the tooltip background toolTipAlpha
– Sets the transparency of the tooltip background These are only some of the attributes that help you customize the appearance of your chart. You can read the documentation on chart attributes for the complete list of cosmetic and functional attributes supported. <div id="top"><div>JavaScript/JSX:
React.render( < MyApp / > , document.getElementById("top") );To summarize, in this example, we have created a React class that will render the chart element when returned. To render the chart, we have called the `render()` method that will call the class we have created. If you have been following along, your output should look similar to the image shown below:
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…
View Comments
Very interesting. This is easier than using native react Js charting tools. I have one question: is it possible to use this tool with a combination of react js and node js?
Hey Mark,
It is possible to use FusionCharts with ReactJS and NodeJS. It would help if you could share with us your specific requirement, so that we can suggest solutions.
Great post! Thanks for sharing very powerful post, It's very helpful. Keep it up.