Illustration by Teddy Tri

Choosing The Right Chart Library

Are you trying to identify the best javascript chart library for your project? Then you are going to face plenty of choices. When you need to apply a chart on the web, it’s normal to decide to use an external library. In most cases, it is common to choose an open-source chart library.

Evaluating every chart library available on the web is daunting yet impossible to do. You need to do a lot of research in different aspects (making a comparison table, etc) to determine which library to use, but those similar processes are repeatedly made.

In this post, I want to describe the basic approach on what to consider when choosing a chart library. I’m not going to giving personal recommendations, since each one’s necessities and applying cases will vary.

Graphic types of chart library
To implement a chart on the web, there are two choices of graphics :

• Bitmap (Canvas)
• Vector (SVG)

How to choose between bitmap and vector graphic? There’s an excellent article about this from MSDN: SVG vs canvas: how to choose.

The basic determination of graphic type selection

Bitmap (Canvas)

Pros

• It is appropriate for displaying massive data in real-time (ex. Tools for admin have no strong needs about designing and it’s okay with the default UI/UX provided from the library).
• The small size of the DOM tree because it renders `<canvas>` tag only.

An example of a realtime chart

Cons

• Customization on UI/UX is quite difficult.
• There’s a limitation of rendering in different types of display scale and zooming, because of the bitmap’s nature.

DOM tree result example of canvas chart

Vector (SVG)

Pros

• There’s great flexibility in UI/UX customization (everything is interpreted as a node). Normally is adequate for end-user targeted services.
• Able to maintain the same resolution quality among different resolutions, including zooming.

An example of different UI/UX customizations

Cons

• Not too adequate to display massive data sets.
• An explosion of the size of your DOM tree and performance problems.

DOM tree result example of SVG chart

Comparison of chart libraries
When you search on chart libraries, you’ll get a bunch of different chart libraries. (one of the lists can be found at https://bestofjs.org/tags/chart)

Popular chart libraries by the total number of stars on Github

Well, every library has pros and cons and is quite difficult to evaluate, because they all have unique characteristics.

Flowchart to choose chart library
If you are a newbie on applying a chart, maybe this flow chart can help you to start.

Conclusion
A canvas-based chart library may suit projects with a large amount of data. SVG approaches typically create a DOM node per point that brings performance problems. If you require full interactivity, it may go against mechanisms that allow SVG to scale, like path collapsing, so there is an inherent tension here.

There is going to be a trade-off in extremes. If the size is small, the answer is SVG hands-down. If the size is large and no interactivity, the answer is using Canvas. If the size is large and interactivity is required, you have to go canvas or tricky SVG, which is complex in either case.

So when you decide to use a chart library, make sure it fits your needs 💛

Contributor: Vany Diah Puspitasari