amCharts is a JavaScript library for data visualization with built-in support for TypeScript and ES6 modules. It is also fully compatible with Angular, React, Vue.js. amCharts offers a wide selection of types of charts, as presented here.

I’ve been using amCharts for months and now I know its major strengths and downsides. When used for static charts, it’s simply amazing. What about dynamic charts?

Initializing an amCharts chart takes a lot of time and resources. Imagine doing this every time we need to change the data visualized, i.e. as a result of an event. This can easily become the bottleneck of a web application, especially if there are many charts (depending on this event) on the same page. This is where memoization comes into play!

Please note that the main goal of this article is not to show how either how amCharts works, or what memoization is. This is why I strongly recommend reading this and this first.

Let’s build an efficient React component designed to wrap any type of amCharts chart.

#technology #react #data-visualization #javascript #data