Creating Reusable React Components To Deploy Multiple Charts

reusable react components to render multiple charts

ReactJS is a JavaScript-based front-end library that helps developers create dynamic and responsive user interfaces. It lets you divide your UI into reusable pieces that are independent of each other in terms of functionality. These pieces are called reusable components. Reusable components facilitate faster development because the next time a developer needs to create a similar UI, they can reuse one of the already created components and thus write less code. Reusable components also help to maintain design consistency.

Popularity with developers

ReactJS topped the charts in a developer poll conducted by StackOverflow in 2017 to study library popularity among developers. Some of the reasons why ReactJS is so popular among developers include:

  • ReactJS is based on JavaScript. Of its own, ReactJS has a very limited API and few functions. Which is why a developer’s familiarity with JavaScript will help them ace ReactJS in not more than a few hours.
  • ReactJS gained immense popularity after Angular 2 deprecated backward compatibility. React’s performance benefits made it the best replacement for Angular 2.
  • With the speed of JavaScript and no dependence on a domain-specific language, React revolutionizes the programming of user interfaces.

Benefits of ReactJS

In addition to the reasons for its popularity among developers, ReactJS also offers the following advantages:

  • ReactJS gives developers the ability to build reusable components. This reusability is perhaps one of the biggest advantages that ReactJS has to offer since it also translates to saving time along with maintaining design consistency.
  • The components are isolated from each other. Change in one, therefore, does not affect the others unless it is allowed. This makes managing updates easy.
  • Downward data binding also ensures that changes in the structure of child components don’t affect the parents. This, in turn, ensures code stability.
  • It is easier for search engines to index web pages that are built using React.

Integrating FusionCharts with ReactJS

About the React-FusionCharts component

FusionCharts Suite XT comes with an extensive range of charts, widgets, and gauges to plot static as well as real-time data. The JavaScript based charting library also has several basic and advanced configuration options that can be used to customize the charts.
The React-FusionCharts component lets you add interactive JavaScript charts to your web and mobile applications using a single reusable React component.

Downloading the required components

Before we start with how you can create charts using the React-FusionCharts component, you need to:
Download FusionCharts Suite XT.
The library is downloaded as a zip package. To install it, unzip and copy the downloaded files in your project folder.

Download React-FusionCharts component.
This is also downloaded as a zip package. Unzip this and copy the downloaded files in your project folder.

Integrating the FusionCharts extension with ReactJS

To include the FusionCharts library and the React-FusionCharts component in your project, copy the following code and paste it in your JS file:

Creating the chart instance

For the sample to be used in this tutorial, we’ll create a column 2D chart that plots the top global oil reserves for the previous year.

Configuring the chart and creating the data source

To set the chart configuration and create the data source for the sample chart, copy the following code and paste it in your JS file:

Creating the Reusable React Component

We’ll now create a component that will contain the basic chart configuration like the chart width and height, the data format, and the data source. In the subsequent sections, where we change a part of the chart’s configuration, we’ll reuse this component to retain the basic configuration of the chart.

To create the chart component, copy the following code and paste it in your JS file:

The chartConfigs component contains the chart’s basic configuration.

Changing the Chart Type

To change the chart type at runtime, copy the following code and paste it in your JS file:

This will render four radio buttons below the chart, allowing you to choose from the column, line, bar, and pie chart types. In the above code, the ReactDOM.render() method is used to call the chartConfigs  reusable react component to re-render the chart. This saves the developer from rewriting the basic configuration of the chart and focus only on the updates in the configuration.

Changing the chart attributes

To update chart attributes at runtime, copy the following code and paste it in your JS file:

This will render four radio buttons below the chart, allowing you to choose from the caption, sub-caption, palette colors, and show labels attributes to update at runtime. Again, the ReactDOM.render() method is used to call the reusable react component.

Changing the chart data

To update the chart data at runtime, copy the following code and paste it in your JS file:

This will render the chart data in a text box below the chart. Edit the chart data and click Change Data to update the chart data at runtime. Similar to the previous two examples, the reusable component is called to re-render the chart’s basic configuration.

Rendering the chart

Rendering the chart by calling the function
Finally, to render the chart, copy the following code and paste it in your JS file:

Output

Here’s how the chart will finally look.

In the result section, click any of the options listed in the pane on the left to see how the sample works.

If you see any errors in your code or have trouble executing the above sample, click here for the complete source code of the sample we have created for this tutorial.
Read more on creating charts in ReactJS.

Leave a Comment