Building a Dashboard in React

Here’s the thing about dashboards: No matter what you do, you can’t escape them. Every department inside every company is chasing a goal—if not several—and there’s no better way to monitor a goal’s status than to have a compact dashboard that monitors all related metrics.

Just think about it. Marketing is running after leads, sales is running after closing those leads and developers are running to solve problems. There’s a dashboard for all of these cases—and, if you’re a developer, at some point you’ll have to make a dashboard for your company. So, I why not learn how to create one now?

In this tutorial, we’ll use JavaScript charts library, offered by FusionCharts, for making charts. But instead of doing it in vanilla JavaScript, we’re going to use React; the hottest JavaScript framework at the moment (and rightly so, if you ask me). In our dashboard we’ll explore the performance of Acme, Inc. in 2015; we’ll see what its top revenue generating countries, monthly revenue trend and highest performing product categories. This is what our final dashboard will look like:

You can see the live version here and find the GitHub repo for the project here.

FusionCharts makes our job a bit easier by providing a dedicated plugin for making charts in React. Before we jump right in, let’s first explore a bit more about React.

React is a JavaScript library for creating reusable View components for the Web. React is fast in that if you want to update your View, you simply re-render the whole View and React will figure out the optimal way to update the Document Object Model (DOM). To achieve this, React uses Virtual DOM and DOM Diff algorithm. You can read more about it on this StackOverflow thread.

Note: If you want to follow along with this tutorial, please download FusionCharts core library here, and its React plugin here.

As mentioned, to create our dashboard we’ll use React and FusionCharts. To abstract out the details of FusionCharts in a React-friendly manner, we’ll use the React Plugin provided by FusionCharts. So, we need to include the JavaScript files of React, FusionCharts and React-FusionCharts plugin. To get started, embed the above three scripts in the HTML page using <script> tags.

To write applications in React, it’s better if we use JSX syntax. Although it’s not advised, and applications can be created in vanilla javascript, using JSX will give a clear picture of the code and the code will be concise. For that reason we’ll build this dashboard in JSX. You can read more about JSX here.

Note: Including the JSX Transformer is only suggested for development applications. For production-ready code, precompile the JSX and you won’t need to include this file.

With the basic setup ready, we’ll add some markup and React JSX code to create the dashboard.

In the dashboard we’re building, we’re creating three visualizations of various revenue metrics of Acme Inc. We’ll create a column chart to show revenues from top six revenue generating countries, a spline chart (smoother version of line chart) to show the revenue distribution over various months of the year and a donut chart to figure out which product category generated the highest percentage share of the revenue. In short, we’ll render column, spline and donut charts. vWe will create the column chart spanning the entire width of the page, and spline and donut charts in a two column layout to span 50 percent width. The following HTML and CSS would create HTML container to create this layout. The HTML containers are where the charts will be rendered.

HTML:

CSS:

Now we’ll prepare the data for these three charts and render them in the containers we have just created.

With the HTML structure ready, we will create a root React component based on our HTML structure. We make the HTML structure into a valid JSX and return it in the render function of the component. To achieve that, we make a few changes like changing class to className.

This is the react component that we create:

Next we render this component into an HTML element:

This is an empty react component that we have created and rendered. We need to create the charts in it and render them in the skeleton markup that we’ve designed (we’ll cover this in the following sections, so sit tight!).

Now, let’s go through the process of creating one chart (column) in detail. Creating the other two charts is similar and you’ll notice the differences in the description below.

Every charting library has a slightly different input data format. Since we’re using FusionCharts for our project, we need to format our data in a format that FusionCharts understands. It accepts JSON data as an array of objects containing label and value. This is what the syntax looks like:

Chart configuration contains various attributes of the chart-like chart type, caption, sub-caption and theme, to name a few. It also contains the data to be plotted. Remember those differences in attributes I just mentioned? These include data, chart type, height and width. There are other theme-related attributes as well, which will be mostly the same for all three charts.

A sample chart configuration looks something like this:

With the chart configuration ready, we can create the React chart. We’ll use the React plugin API to create it. The only input to the plugin is the configuration that we created earlier. We can simply create it using the following code.

The chart we created above is a column chart, the other two charts are spline and donut. We’ll create chart configurations for these two and mention the right types and create the React chart component.

Now we need to place the three chart components appropriately in the JSX of the DashboardApp we created earlier. This is the new JSX after placing the chart components.

After adding this you should see the dashboard rendered on your page. If you had any issues or want to see the source code of the project, head over to project’s GitHub repo.

Using the process I described above, you can create relatively sophisticated charts and dashboards in React. Of course, we all come across issues when we try to build things on our own. To help you out in times like these, I’ve listed some resources below.