In 2018 I collated an in-depth article on the best data visualization and charting libraries available for JavaScript. In this new 2021 edition, I will be re-rounding up the best, latest, and up-and-coming charting libraries and going into detail about their Chart type availability, features, and in addition, demonstrating various examples. For the record, this list isn’t in any particular order.

1. NVD3.js

First and foremost is a library I’ve used frequently in industry and it never fails to please. NVD3 is a library that sits on top of the d3.js JavaScript library utilizing many of the usual traits.

NVD3 is now in version 1.8.6 which is up from its initial release of 0.9 back in 2013. The library doesn’t have every single chart imaginable but has all the most popular core ones. For example, scatter, bar, line. The rendered charts have a very easy-on-the-eye style with pastel-like colours that go well with any dashboard.

Notable Feature List

• Completely responsive
• User-friendly tooltips
• Customizable tooltips
• Easy to work with JSON
• Series turn on / turn off
• Legends
• Dual-axis capability
• Quick and easy to download and use
• Plenty of examples
• Live chart playground

Chart Availability Table

Demo

See the Pen
NVD3.JS Examples by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

NVD3 is released and licensed with the Apache 2.0 license meaning it’s completely free to use for both personal and commercial practices.

CDN Links

NVD3 is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/nvd3
• https://www.jsdelivr.com/package/npm/nvd3

GitHub Repo

• NVD3 GitHub Repository

Documentation

• NVD3 Documentation

2. Dygraphs

Dygraphs is probably one of the fastest rendering charts I have come across, especially when the data set is vast. This library can handle data sets going into the tens of thousands and still deliver a great user experience.

The one drawback to all this glory is that it’s completely based on line graphs. No bars, pies, or anything that you would usually see in a JavaScript charting library. Not to worry though, it’s still an epic package, and here’s why.

Notable Feature List

• Can handle huge data sets and is superior in this department when compared to other libraries
• Cross chart synchronization
• Annotations, and highly customizable annotations at that
• Range/Viewfinder
• Very simple to get develop with
• Perfect for real-time data visualization
• Extremely fast data point feedback with off-chart data display
• Zoom in and out functionality
• Plenty of examples with links to JSFiddles
• Easy to work with data, simple arrays, or load from text or CSV files

Chart Availability Table

Demo

See the Pen
Dygraphs Example by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

Dygraphs is licensed under the MIT License which offers usage, modification, and distribution by both personal and commercial parties.

CDN Links

Dygraphs can be delivered directly to your own project by the following CDN networks

• https://www.jsdelivr.com/package/npm/dygraphs
• https://cdnjs.com/libraries/dygraph

GitHub Repo

• Dygraphs GitHub Repository

Documentation

• General Tutorials
• API Reference
• Annotations Tutorial

3. Vis.js

Vis.js is a very versatile parent library of other sub-libraries including networking, timeline, 2d, and 3d visualization capabilities. This library offers 3d charts which are pretty rare amongst most charting libraries which definitely gives it an edge.

Vis.js has some stunning visualizations in both 2d and 3d forms but of course, all will serve specific purposes. Personally, I’ve never come across the need to use 3d charts but if your working in some type of scientific data analysis background, I could imagine it would be useful.

Notable Feature List

• 3D Charts
• 2D Charts
• Multi-chart capability
• Optional tooltips
• 3D interactivity on relevant charts
• Chart playgrounds demonstrating many of its features
• Flawless animations

Chart Availability Table

In addition to the above, surface charts are available including network type visualizers and timeline visualizers.

Below is a demo of one of the types of timeline charts the library offers.

Demo

See the Pen
Vizjs Example by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

The Viz.js library is dual-licensed under both Apache 2.0 and MIT licenses. Both of these licenses enable usage, modification, and distribution by both personal and commercial parties.

CDN Links

VizJS can be delivered directly to your own project by the following CDN networks

• https://cdnjs.com/libraries/vis

GitHub Repo

• https://github.com/visjs/vis-timeline

Documentation

• Main homepage of different libraries and documentation

4. ChartJS

Next at number four is another one of my personal favorites. If you want a chart visualization library that always looks great, then this is the one. Somehow, the creator of ChartJS got the default colors absolutely perfect and they go so well within any website. It’s again another library that doesn’t have a massive selection of charts but does it very well with the ones it does offer.

Notable Feature List

• Very easy to work with without the knowledge of JSON markup.
• Mixed chart types, build bars and lines onto the same visualization.
• Beautiful animations
• Tooltips
• Renderable on all major browsers including IE11+
• Completely responsive
• Thorough user documentation and sample base
• Includes one of the only free-to-use radar charts that actually works correctly and visualizes data properly.

Chart Availability Table

Demo

See the Pen
Radar Chart Example With ChartJS by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

ChartJS is released under the MIT license and therefore is freely available to use in your own personal and commercial projects. It

CDN Links

ChartJS is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/Chart.js
• https://www.jsdelivr.com/package/npm/chart.js?path=dist

GitHub Repo

• ChartJS GitHub Repository

Documentation

• ChartJS Documentation
• ChartJS Examples

5. ApexCharts.js

ApexChart.js comes with a variety of elegant features to bring beautiful data analysis to your web pages. On paper, this library ticks nearly all the boxes you would usually want it for. With annotation capability which is relatively rare in free-to-use packages. Responsiveness and animations and to top all that off, it looks pretty great too.

Notable Feature List

• Beautiful visual annotations
• Completely responsive
• Flexible interactivity including pan, scroll, zoom in and out.
• Tooltips
• Vast user documentation
• Preset color themes you can easily switch between
• Lot’s of demos and source code to get your hands on
• Offers paid upgrades to include some of FusionChart’s add-on packages.
• Works flawlessly with vanilla JS, VueJS, React, and Angular, documentation included.

Chart Availability Table

Note: With the ApexChart FusionChart premium package, further visualizations are available such as funnel, Marimekko, maps, and bullet-style charts.

Demo

See the Pen
ApexChart Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

ApexChart.js is released under the MIT license and therefore is freely available to use in your own personal and commercial projects. Considering how many features this library offers, it’s hard to believe it’s free to use!

CDN Links

ApexCharts is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/apexcharts

GitHub Repo

• ApexCharts GitHub Repository

Documentation

• ApexChart.js User Documentation
• Live Demos

6. Billboard.js

In what feels like a very minimalist library, billboard.js comes with a good set of charts for data visualization. It’s based on D3 version 4 and has similarities to c3.js charts. Billboard has a stacked list of charts to use and a huge load of configurable assets such as the legend, axis, and tooltips.

Notable Feature List

• Vast customization allowing you to get the exact visualization for the job at hand
• Completely responsive
• Tooltips and dual chart linked tooltips
• Manual Zoom, drag zoom, and sub-charts with viewfinder zoom
• Easily added labeled Y lines which are great for added analysis
• Gradient chart area fills

Chart Availability Table

Demo

See the Pen
Billboard.js Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

Another project that has been released under the MIT license. Billboard.js is therefore freely available to use in your own personal and commercial projects. Considering how many features this library offers, it’s hard to believe it’s free to use!

CDN Links

Billboard.js is hosted on various CDN networks as listed below

• https://cdnjs.com/libraries/billboard.js/2.1.4

GitHub Repo

• Billboard.js GitHub Repository

Documentation

• Billboard.js User Documentation
• Live Demos & Docs

7. FrappeCharts

If you’re a keen developer, then you’ll probably feel familiar with the way that Frappe Charts look and feel. That’s because the charts designs are inspired by charts you find on GitHub. You will recognize the heatmap straight away if you’ve been making plenty of commits lately.

Notable Feature List

• Rapid export an SVG capability which is basically an instant export to image (SVG) file.
• Annotations
• GitHub theme inspired which is extremely clean
• Beautiful animations during chart updates
• Mixed chart capability
• Epic looking tooltips when using multi/mixed charts
• Fully responsive
• Zero dependencies

Chart Availability Table

Demo

See the Pen
FrappeCharta Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

Frappe Charts are completely open-sourced and released under the MIT license. This gives the rights for both personal project and commercial project use alike.

CDN Links

Frappe Charts is hosted on various CDN networks as listed below

• https://www.jsdelivr.com/package/npm/frappe-charts
• https://unpkg.com/browse/[email protected]/

GitHub Repo

• Frappe Charts GitHub Repository

Documentation

• Frappe Charts User Documentation
• Demo

8. ToastUI

ToastUI is a very visual, modernized library that not only offers pretty much all the common charts but looks brilliant too. Each chart has the capability to be exported in a variety of ways including .xls (data), .jpg (image). This of course is very handy for the end-user, especially the ability to export the data behind the chart for further analysis.

Notable Feature List

• Multi export functionality which includes .xls, .csv, .jpg and .png
• Completely responsive for the modern web
• Nice animations during real-time data updates
• Beautiful animations during chart updates
• Deselectable/selectable data series
• Zero dependencies

Chart Availability Table

The ToastUI library also features boxplot charts and the ability to mix charts such as line bar, line, scatter, and line area.

Demo

See the Pen
ToastUI Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

ToastUI has been released under the MIT license. This gives the rights for both personal project and commercial project use alike.

CDN Links

ToastUI is hosted on various CDN networks as listed below

• https://uicdn.toast.com/chart/latest/toastui-chart.min.css
• https://unpkg.com/browse/[email protected]/

Or

• https://cdnjs.com/libraries/tui-chart

GitHub Repo

• ToastUI Chart GitHub Repository

Documentation

• Demos, Examples and Documentation

9. RoughViz

RoughViz is certainly one to look at in 2021, built upon d3.js version 5, brings very unique visualizations to your front end. The rendered charts are almost like crayon drawings, with rough borders and coloring, it actually really pleases the eye. The library is super-easy to work with utilizing array-based data sets and various options easily modified.

Notable Feature List

• Very unique, nothing else around like it
• Plenty of customizable options
• Tooltips
• Built upon d3.js version 5

Chart Availability Table

Demo

See the Pen
RoughViz Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

RoughViz is another library that can be used in both commercial and personal projects free of charge. The library is released under the MIT license.

CDN Links

NVD3 is hosted on various CDN networks as listed below

• https://unpkg.com/[email protected]

GitHub Repo

• RoughViz GitHub Repository

10. AmCharts

AmCharts is a massive library with pretty much every chart you could possibly imagine including the ability to customize in some really cool ways. AmCharts is a ‘freemium’ library so-to-speak, anyone can use the charts or maps, etc if they don’t mind a small attribution logo being displayed under the visualizations. And to be fair, the attribution is barely noticeable and certainly non-intrusive. AmCharts have a bunch of high-profile clients such as Microsoft, Amazon, Nasa, eBay, and more.

Notable Feature List

• Maps, charts, timelines, you name it, AmChart have it
• Incredible animations
• Vastly customizable
• Ability to nest charts within charts such as a pie chart within each bar of a bar chart
• Pictorial chart capability
• Huge documentation base with hundreds of demonstrations to explore
• Examples demonstrated in both Vanilla JS and TypeScript/ES6

Chart Availability Table

Demo

See the Pen
AmCharts Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

AmCharts has a freemium license model which means anyone can use the chart packages for free as long as the attribution logo is visible. If not, then you can buy the premium, no-attribution license which starts from $180 for the general charting package and $180 for the map & timeline package. As you can see in the demo above, the attribution logo (bottom left) is pretty reasonable for what you are getting for free.

CDN Links

AmCharts is hosted on various CDN networks and has its own CDN source links too.

• https://www.amcharts.com/download/
• https://cdnjs.com/libraries/amcharts4
• https://www.jsdelivr.com/package/npm/@amcharts/amcharts4

GitHub Repo

• AmCharts GitHub Repository

Documentation

• AmCharts Documentation
• AmCharts Demo Library

11. C3.js

C3.js deserves its place in this list of the best JS libraries available in 2021. The library has been around a long time, is super-clean, customizable to suit many needs, and has a good range of charts to work with. Built upon the renowned D3.js charting engine, C3.js offers a maintained, up-to-date visualization experience that is perfect for most use-cases.

Notable Feature List

• ‘Zoomable’ sub-charts
• Appealing animations
• Highly customizable
• Tooltips
• Excellent documentation with code examples and demonstrations

Chart Availability Table

Demo

See the Pen
C3.js Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

C3.js is an open-source library free to use for both personal and commercial projects alike. C3.js is released under the MIT license.

CDN Links

AmCharts is hosted on various CDN networks and has its own CDN source links too.

• https://cdnjs.com/libraries/c3
• https://www.jsdelivr.com/package/npm/c3
• https://www.jsdelivr.com/package/npm/@amcharts/amcharts4

GitHub Repo

• C3.js GitHub Repository

Documentation

• C3.js Documentation
• C3.js Demo Library

12. HighCharts

When it comes to having the full package, HighCharts is one of these contenders, having basically every chart type you could possibly need. Not only does HighCharts offer general charts like Line, bar, pie but also has additional Map-focused libraries, stock market-style libraries, and much more. Although having all this greatness, does come with one downside, it’s not 100% free.

Notable Feature List

• Everything you could possibly need for data visualizations. Maps, charts, timeline (Gant), and much more.
• Comes with a vast documentation base with demos and code examples
• Modern design with excellent tooltip visuals
• Commercially focused with 24-hour tech support available with licenses
• Chart annotations

Chart Availability Table

Demo

Licensing

HighCharts is mainly a premium licensed model with the ability for personal use with attribution using the Creative Commons license. Commercial licenses start from $535 for a single developer.

CDN Links

HighCharts has its own hosted content delivery network links which can be found using the following link

• https://code.highcharts.com/

GitHub Repo

• HighCharts GitHub Repository

Documentation

• HighCharts Documentation
• HighCharts Demo Library

13. GoogleCharts

Google charts is a very long-standing charting package that pretty much has it all. With an excellent documentation base and examples to support. Google Charts have an almost semi-modern style with the instant visual realization that it’s a Google brand, especially by the default color scheme.

Notable Feature List

• A massive feature of this package is that it’s completely free for commercial use, which is pretty awesome considering the size of the brand
• Extremely detailed documentation base with many examples to learn from
• Tooltips
• Annotations
• All charts are zoomable
• Some of the best visual chart gauges on the web (In my opinion)

Chart Availability Table

Demo

See the Pen
Google Charts Demo by Danny Englishby (@DanEnglishby)
on CodePen.

Licensing

GoogleCharts is completely free to use across the board giving personal and commercial the rights to use it.

CDN Links

Google Charts has its own hosted content delivery network links which can be found using the following link

• https://developers.google.com/chart/interactive/docs/basic_load_libs

GitHub Repo

Not applicable

Documentation

• GoogleCharts Documentation
• Google Charts Examples and code snippets

14. SmoothieCharts

SmoothieCharts is another very unique, one-purpose charting library. Bringing excellently animated line charts to the table for fast updated data. The library is perfect for manufacturing PLC data or as demonstrated in the examples a CPU monitor. Animations are flawlessly smooth and you wouldn’t expect anything less considering the name.