Data Visualization with React & amCharts
By: Amal Amine
Tags: React, Web Development, Charts, JavaScript, Data Visualization

Data Visualization with React & amCharts

At some point while building web-applications, you’ll find the need to visualize some data — be it with graphs, maps, or charts.

Luckily for you, there’s an abundance of Javascript chart libraries and tools. Some are easy to use, others require you to do most of the work on your side. One of the biggest problems with most of those libraries, however, is how little flexibility they allow developers, in both styling and functionality. As a result, you may find yourself deciding what functionality you can accommodate and what design you can achieve according to the library you’ve chosen.

I recently had to build a chart dashboard. One with pie charts, bar charts, line charts, that can visualize multi-series datasets in multiple languages and can follow the client’s very specific design. I found multiple tools that allowed me most of the above, but almost all of them struggled with reversing data and rendering charts from right-to-left, to accommodate rtl languages like Arabic.

Until I stumbled upon amCharts, a popular and powerful JavaScript data visualization library that I could use for free (with a backlink).

In this tutorial we’ll go through steps to render a simple bar chart with multi-series & rtl support, as well as custom styling.

Constructing your dataset

First, let’s put together a dataset that we can render as a bar chart. We’ll start with a simple dataset with one series.

A hearty lunch

You need a list of labels and values; the labels being your x-Axis and the values being your y-Axis.

Creating a skeleton for your chart

Let’s start with creating a separate component for our chart. In this step we need to define what props we’ll pass into our component.

Every chart should have a unique id, so we could render it via amCharts, and dispose of it if we need to. We also need to define what the labels for our x-Axis (category) and y-Axis (value) will be.

For the sake of multi-lingual support, it’s wise to add an rtl flag for charts that should render from right-to-left to support languages like Arabic. This way in case the locale of our web-app is in a language that’s read from right to left, we can pass the optional rtl prop to have the chart render from right to left as well.

Finally, we need to pass the data we want to render to the chart component.

Taking care of the basics

Next, we need to take care of the essentials: initialising, updating, and destroying the chart.

Note the added lifecycle methods

In this step we added the dependency @amcharts/amcharts4 and initialized an empty XY chart as follows:

componentDidMount calls an function that initializes the chart. We’ll separate the logic into the initChart() function so we could utilize it when updating the component, as well.

calls an function that initializes the chart. We’ll separate the logic into the initChart() function so we could utilize it when updating the component, as well. componentDidUpdate ensures that the chart is re-initialized when the dataset we’ve passed into it changes. We do so by destroying the chart using amCharts’ dispose() method, and then initializing is again.

ensures that the chart is re-initialized when the dataset we’ve passed into it changes. We do so by destroying the chart using amCharts’ dispose() method, and then initializing is again. componentWillUnmount destroys the chart using the dispose() method.

destroys the chart using the dispose() method. initChart will house all of our logic. for now, we’ll instruct amCharts to use a theme, and create an XYChart using the chartId we passed as a prop. XYChart types are used to plot serial 2-dimensional data, like line and bar charts.

Defining the x & y axis

Let’s build up our initChart function. After creating a chart instance, we need to push two axes into it; the category axis & the value axis.

Creating your data series

amCharts allows us to push as many series as we want into our chart instance. Before doing so, we need to format our dataset to fit amChart’s data structure.

Naturally, we need to give each series a name & define its data fields.

Creating a style theme

Define the basic styles for your chart. You can let your creativity go wild here and make use of as many properties as amCharts’ docs allow you to.

I chose to stick with basic styling of the grid color, width and opacity, as well as the column colors:

Styling your chart

In this step we’ll apply the styling to the elements of our chart:

Category axis grid: stroke & stroke opacity, grid distance and layout.

stroke & stroke opacity, grid distance and layout. Category axis labels: starting location, color, wrapping & truncation.

starting location, color, wrapping & truncation. Value axis grid: stroke width & stroke opacity, grid count.

stroke width & stroke opacity, grid count. Value axis labels: starting location, color, wrapping & truncation.

starting location, color, wrapping & truncation. Data columns: fill color, fill opacity, stroke width and stroke opacity.

Rendering the first version of your chart

At this point, we have enough to make use of our component, let’s render our component to see what it looks like.

Create a simple functional component to render the chart and pass the data series, x & y labels, and chartId to it.

Add some basic styling for the component. Specify the graph height & width.

Our hearty lunch menu visualized

Making your chart interactive

As your charts grow more complex and harder to navigate, it’ll make sense to allow the user to hover and view the data in more detail. Let’s add a tooltip for the columns to render its group name and value.

All textual labels and tooltips in amCharts pass via a TextFormatter. Which allows us to add data placeholders, like {name} and {valueY}, and visual formatting, like [bold]. This will render a tooltip whenever we hover over any of the columns, as follows:

Adding support for multi-series data

Let’s add another data series. Since we built support for multi-series data in our BarChart component, simple adding another data object should do the trick.

I guess it’s wise to cut down on the caffeine

Adding an interactive legend

With multi-series data, it’s always helpful to have a legend to help the users make sense of the chart they’re looking at. amCharts’ legend property is interactive by default, allowing you to toggle each series on and off for a better view.

Testing support for right-to-left languages

Finally, let’s pass the optional rtl prop to the chart component in BarChartApp.js as follows:

<BarChart chartId="chart" data={data} categoryLabel="item" valueLabel="count" rtl/>

This will execute a few if statements in our initChart() function — mainly to reverse the data set, and tell amCharts to render the y-Axis on the right side. Making the chart flow friendlier in right-to-left web-apps.

What’s next?

amCharts is an extremely powerful tool, and we’ve barely scratched the surface of what we can achieve with it.

If you’d like to dig deeper into all the features it allows, take a look at the v4 docs. You can extend this starter chart into other chart types according to the dataset you’re passing. Or you can customize your axes, legend or chart cursor further.