To summarize, in this example, we have created a React class that will render the chart element when returned.
#React dist unpkg code
To render the chart, add an HTML container element in the body of your HTML page, as shown in the code snippet below: You can read the documentation on chart attributes for the complete list of cosmetic and functional attributes supported. These are only some of the attributes that help you customize the appearance of your chart. ToolTipAlpha – Sets the transparency of the tooltip background ToolTipBgColor – Changes the color of the tooltip background ToolTipColor – Changes the color of the text in the tooltip ValueFontSize – Sets the font size of the values Tooltips: Fonts:īaseFont – Selects any standard/non-standard font family for the text used in the chartīaseFontSize – Sets the font size of the values and text in the chart PlotFillAlpha – Sets the transparency of the data objects in the chart. PaletteColors – Assigns colors to be used in the chart elements.Īnimation – Selects chart animations on loading the chart.ĭivLineDashed – Makes the divisional lines dashed by setting it to `1`. ShowAlternateVGridColor – Creates alternating vertical grid bands by setting it to `1`. To add to the visual appeal of the chart, we can configure chart attributes, some of which can are below: Canvas:īgColor – Select the background color of the chart. Configuring Chart Cosmetics Using Chart Attributes Since we are using the JSON data, the ` dataFormat` is set to JSON.
The ` width` and ` height` define the size of the chart canvas. For the complete list of chart types supported by FusionCharts, you can refer to the list of charts. The bar chart is just one of the many chart types supported by the FusionCharts Suite. ` type` : attribute defines the JS chart alias to render. The chart ` id` and the ` renderAt` objects in the Chart Configuration define the chart and the rendering element, respectively. The chart instance will consist of two essential parts – the ‘ chart configuration’ and the ` render()` method. With the dependencies in place, we will create an instance for our chart.
#React dist unpkg install
`npm install react react-dom fusioncharts react-fusioncharts –save`. Power up: You can do the entire setup by running just one command: Next, you’ll have to load the FusionCharts and Charts modules using the ` require` command. However, the installation and rendering process would differ for this method.įor NPM, you will have to first render install the ReactJS and FusionCharts packages. Or, you can install the React-FusionCharts Component using NPM. To avoid misrepresentation, you must add the react-fusioncharts.js file after adding all other scripts.
You need to include the fusioncharts.js and the react-fusioncharts.js script source links in the ` head` of your HTML page, as shown in the code snippet below: The installation of the libraries is pretty simple.
#React dist unpkg download
To get started, you need to download the React-FusionCharts Component Based on the requirement of the bar chart, we will convert our source data into ` label` and ` value` key-value pairs in the JSON format.Īfter formatting all the data, the JSON representation will look like this: Step 2: Include the React and FusionCharts Libraries Since the data is comparative, we can effectively visualize it using a bar chart.
0 kommentar(er)
