How to Use AmCharts 4 With React Hooks
Tags: Reactjs, Data Visualization, Amchart, React Hook, React

If you’re reading this article, you probably decided to use AmCharts as your data visualization solution, but you are having an issue or two with how to integrate it with your React project that uses Hooks.

Well… been there, done that :).

AmCharts is one of the most used data visualization solutions out there. You can use it for free (with their small logo present on your charts in that case) or buy the license and don’t have to show the logo, get premium support and other benefits.

While the documentation is free, publicly available, very extensive and detailed with a lot of demos, it has a “downside” of focusing on the library itself, not on integration with other frameworks or libraries.

In the past months I built quite a few charts with AmCharts and React Hooks, and by doing so, I had to dig through github issues, stackoverflow questions and reddit posts (reddit is so great :)) to get a feeling of what would be the best practices and how to use it the “proper” way with Hooks.

These are my findings, if you have questions or suggestions — feel free to start a discussion in the comments.

Packing the data

Learning is best by example, so let’s build a simple chart that visualizes Europe’s population since 1990 in a 5 year step, using column series. In plain language, the chart will show population of Europe for years 1990, 1995, 2000, 2005, 2010, 2015 and 2018 (year with last final data). Wikipedia is used for data source.

Our data set looks like this:

Preparing the basics

Since we have the data ready, let’s build our React chart component. Boilerplate code, that we start with, looks something like this:

Above we have chartId as an optional prop, so the div that chart is going to be mounted into, either has this chartId or fallbacks to CHART_ID . Dynamic ids passed as props come in handy when you want to render multiple charts on the same page (to avoid ids collision).

In a real life situation, most probably the data for the chart will come as props as well, but for sake of simplicity, I left it out in our example — so we use data stored in a data const .

Now we want to initialize the chart. useEffect hook, with an empty dependency array (so it gets executed only on initial component mount) is the place for that.

NOTE: Official AmCharts documentation, in it’s guide on integrating with React Hooks, shows use of useLayoutEffect . It is similar to useEffect , but it is fired synchronously, after DOM mutations. React Hooks documentation recommends starting with useEffect first and only trying useLayoutEffect if that causes a problem.

Note that refs mechanism is used to save reference to the chart. Refs are a good way to persist information between component re-renders. This will come in handy for disposing the chart as well.

Besides basic setup, we did some styling as well — to showcase just one tiny portion of all the things that AmCharts can do.

Re-rendering the chart on data change

Now we add a new useEffect hook, with data in the dependency array. For this demo, data will not change, since it is a static information stored in the data const . However, in a real life situation, data will most probably be fetched from a backend service, so you will pass it to the chart as a prop. You want to make sure that, when data prop is updated, your chart gets updated as well, and that’s exactly what we are going to do in the code below:

NOTE: Updating the whole chart dataset is an expensive operation, because it triggers not only react re-render but also chart’s internal calculations and repaints. As an optimization boost - you can set data per series. Of course, in that case, you would need to extend the approach shown above.

Idea:

save reference to each series

extend the dependency array of useEffect with series-specific data

with series-specific data get series by reference (or by id), set the data per series, as described above

and so on...

Extended reading on the topic: https://www.amcharts.com/docs/v4/tutorials/dynamically-adding-and-removing-series/

Disposing the chart

Since we have the chart reference stored in ref , it is easy to dispose the chart, to avoid memory leaks and ugly warnings in the console. Short reminder for those who are migrating from classes to Hooks or who are just still new to Hooks — if your effect returns a function, React will run it when it is time to clean up — perfect place to do some chart disposing.

This is it — we have our fully working chart done with React Hooks and AmCharts 4, which looks like this:

You can check the fully working version on codepen.

Hope you enjoyed this short walk-through — if you have any questions, suggestions, doubts or thoughts — please feel free to share in the comments section :).

Sources: