JavaScript Chart Libraries: 13 Popular Choices

In this article, we are going to take a look at the most popular libraries for creating charts with JavaScript. We'll also explore examples, consider language support (such as TypeScript), and whether the library has support for popular frameworks, such as React, Vue, and Angular.

JavaScript chart libraries

If we look at purely charting libraries, there are probably around 30-35 active projects on GitHub alone. And that number grows way higher if you include libraries for mapping, data grids, and 3D data visualization tools. That said, this article explicitly focuses on JavaScript charting libraries, with a few criteria points to help make this list relevant.

Those points include framework compatibility (see here for popularity), TypeScript support, and whether the library is open-source as opposed to having a proprietary license.

Before we get started, if you're interested in animation - make sure to check out my previous article on JavaScript animation libraries. I'll try and follow the same structure here, to provide concrete examples, but also links to additional resources and learning materials.


#1 – Chart.js

ChartJS

Chart.js is a practical charting library that uses HTML5's <canvas> to render the charts.

The library is easily the top choice for simple projects, for reasons such as that it is responsive by default, and you can also apply animation effects based on user behavior.

Here are the 8 types of charts that you can create with Chart.js:

  • Area Chart
  • Bar Chart
  • Bubble Chart
  • Doughnut and Pie Charts
  • Line Chart
  • Mixed Chart Types
  • Polar Area Chart
  • Radar Chart

As far as ease of use goes, the syntax is simple, and even if you have never worked with JavaScript before, creating a new chart is straightforward.

const data = {
  labels: [
    'Red',
    'Blue',
    'Yellow'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [300, 50, 100],
    backgroundColor: [
      'rgb(255, 99, 132)',
      'rgb(54, 162, 235)',
      'rgb(255, 205, 86)'
    ],
    hoverOffset: 4
  }]
};

If you'd like to extend the charts with dynamic functions and data pooling, the library has a Plugins system that you can use to add new functionality.

Chart.js Example

 

See the Pen Proof of concept: Chart.js with Background Gradient by Sven (@hofmannsven) on CodePen.

 

Chart.js Additional Resources

#2 – D3.js

D3js

Let me start by saying that D3 is a data visualization tool rather than a traditional charting library.

D3 lets you specify a data set and bind it to the DOM, afterward you can use the libraries functions to transform that data into a unique visual representation. As for visual presentation, D3 takes advantage of HTML tables, SVG, and <canvas> for rendering the data on a page.

If you've ever seen one of those geo-based spinning globes with multiple interactive data points on them, chances are that presentation was built with D3. However, it works well for practical uses also, such as the basic chart you can see in the demo below. Ultimately, you'll want to refer to the official Tutorials section for D3 to explore its more intricate capabilities.

D3.js Example

 

See the Pen D3 Chart + ReactJS by Web Dev (@ronaldmarin) on CodePen.

 

D3.js Additional Resources

#3 – Apache ECharts

Apache ECharts

One of the reasons Apache ECharts is so popular is that you get access to hundreds of pre-made chart examples straight out of the box. You can check this out yourself by visiting the Examples directory. This page cover charts and examples in categories like lines, bars, pie charts, scatter, heatmaps, graphs, and so much more.

And, every single example has JavaScript and TypeScript code examples included. But that's not all, there are some real-world benefits to using this library. Here are a few of them:

  • Data streaming. Want to create interactive charts with millions of data points? ECharts uses WebSockets to stream data so that it can be loaded asynchronously even with extremely large data sets.
  • Mobile-friendly. When users view an EChart on their mobile devices, the chart itself has been optimized to provide interactive features - zoom, panning, and SVG rendering to ensure best deliverability.
  • Dynamic Data. You can feed ECharts multiple (separate) data points, and the library will automatically animated the chart to give users an interactive experience.
  • Accessibility. Apache ECharts (v4.0 and up) is built to follow the WAI-ARIA guidelines.

You can also display your charts on your website using an external CDN.

Apache ECharts Example

 

See the Pen Apache Echart Example by Vale (@vsigno) on CodePen.

 

Apache ECharts Additional Resources

#4 – Plotly

Plotly

Plotly is the parent company of Dash, a low-code solution for data application deployment. And they develop their own graphing library - Plotly - on the premises.

With Plotly, you can create the most basic chart visualizations, but the library's real power lies in the ability to produce stat-based charts, 3D data representations, and charts based on financial data.

It's available both as a Node.js module, but also can be used directly from a CDN.

Plotly Example

 

See the Pen Add annotation on click event by plotly (@plotly) on CodePen.

 

#5 – Frappe

Frappe

The Frappe charts library is made by the folks that created the Frappe Framework. This library is as simple as it gets. And that simplicity is a major contributing factor to the library's popularity.

The library requires no external dependencies and can render mobile-friendly SVG charts in just a few lines of code. Here's a code example for a basic Axis chart:

data = {
    labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    datasets: [
        { values: [18, 40, 30, 35, 8, 52, 17, -4] }
    ]
}

new frappe.Chart( "#chart", {
    data: data,
    type: 'bar',
    height: 180,
    colors: ['red']
});

And this small snippet would translate to a chart like this:

Frappe chart example

There's also support for mixed charts (multiple charts in one), annotations, heatmaps, and an API is available if you plan to update data in real time, or export it.

Frappe Example

 

See the Pen Frappe Hello World by Jang Rush (@weakish) on CodePen.

 

#6 – ApexCharts

ApexCharts

ApexCharts is very much a traditional charting library. The main difference between ApexCharts and Frappe (for example) is that ApexCharts provides slightly more demos. But, also, offers native support for popular frameworks such as React, Vue, and Angular. This also means that all the demo charts have their respective samples written in the syntax of the said frameworks.

As for features, all charts are generated in SVG format and are mobile-friendly by default. You can also take advantage of features like smooth animations, and annotations, and customize your chart theme palette by picking one of the 10 sample styles.

ApexCharts Example

 

See the Pen Realtime Dashboard by ApexCharts (@apexcharts) on CodePen.

 

#7 – G2

G2js

I've recently talked about Ant Design on several occasions, including in my articles about component libraries for React.js and Vue. Not only is Ant extremely popular on GitHub, but communities love them in all regions of the world.

And the G2 charts library (or as they call it "Visualization Grammar") is Ant Design's implementation of a charting system using the Ant Design System. I highly recommend checking out the AntV homepage, where you'll find plenty of other libraries relating to real-time data visualization.

It is most often used to build things like admin dashboards, create data paths, and make interactive data visualization examples using its rendering engine. This engine can render charts and data vectors through WebGL, Canvas, and SVG. And because the library is pluggable, you can further enhance your chart presentations through more robust libraries like D3.js (which we saw earlier).

#8 – roughViz

roughViz

The roughViz library from Jared Wilber is a combination of 3 different libraries: D3.js, Rough.js, and handy - a hand-drawn sketch processor. As you can tell from the example screenshot above, this isn't your typical charting library. roughViz is built entirely with the purpose to help you create hand-drawn, sketch-style charts using JavaScript.

This type of library will make a great addition to personal projects, in other words - projects that require a more creative spark than the traditional professional-style approach. And the syntax itself is as simple as it could be, very much in line with the likes of Frappe and ApexCharts.

You can see that for yourself in the demo below.

roughViz Example

 

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

 

#9 – Lightweight Charts

Lightweight Charts

If you're working on a finance-related project (or cryptocurrency for that matter), it's quite clear that many of the previously mentioned chart libraries just won't cut it. As such, here is Lightweight Charts - a charting library built specifically for displaying finance-based charts and graphs.

Not only is this library open-source and lightweight, but it also packs all the necessary features that would be required for displaying chart data about finances and their dynamic structure.

One of those features is data streaming, which lets you pass real-time data to your canvas and then have it updated without the user needing to refresh the page. And another factor you may be considering is performance, which should be a non-issue as explained on this library's homepage,

"Our charting solutions were engineered from the start to work with huge data arrays. Charts stay responsive and nimble even with thousands of bars even with updates multiple times per second with new ticks."

Check out the demo below to get a feel for it, but also many of the chart options and features.

Lightweight Charts Example

 

See the Pen tradingview advanced chart by truong (@truong160196) on CodePen.

 

Lightweight Charts Additional Resources

#10 – Billboard

BillboardJS

Billboard is an interface chart library based on D3. It has all the modern features you'd expect - SVG rendering, touch support for mobile devices, a simple interface, and great API documentation.

However, my favorite feature, and arguably for many others also is that Billboard provides over 230 examples of the charts you can create with this library. These examples are divided into chart categories like Basic, Axis, Data, Grid, Interaction, Region, and many others.

This means that you can not only find the correct chart type for your project and its requirements, but you can also explore other options and see if a particular example captures your attention.

Billboard.js Example

 

See the Pen Chart Requests - Billboard.js by DTCC (@dtcc) on CodePen.

 

#11 – Perspective

PerspectiveJS

Perspective is one of the projects that FINOS (Open-Source Fintech) operates, and FINOS itself is also part of the Linux Foundation. Much like Lightweight Charts - Perspective.js is oriented around providing chart solutions for finance-based projects. However, it is capable of much more than that and sees frequent use in projects related to eCommerce, data grids, and shipment segmentation.

PerspectiveJS chart example

If you've ever seen charts about Covid-19, Airports, and major sporting events like the Olympics, there's a good chance the interface and data stream integration was done with Perspective. It has a rich User Interface, optimized for data streams and complex real-time analysis.

It's available for JavaScript and Python developers and uses Custom Elements Web Component.

#12 – Toast UI Chart

Toast UI Chart

If anything, the Toast UI charting library is yet another choice to consider as far as chart styles and their design goes. The functionality here is very similar to libraries we've already looked at.

I think the area in which Toast UI differs from other choices is its API specification. It's probably one of the better APIs you can get your hands on, and it comes with complimentary in-depth documentation. One of the API features is Instances, a way for you to dynamically change chart data either because your data source has changed, or because of user input.

Toast UI chart example

The chart types that Toast supports include bars, columns, lines, areas, bubbles, treemaps, radars, radial bars, and others. The preferred way to use this library is through npm, but a CDN is available, and all you have to do is specify a div id="chart" container for where you want the chart displayed.

#13 – Recharts

Recharts

If you're working primarily with React.js, the Recharts library is built on top of D3.js with React. It respects the native React.js component architecture, and charts created with Recharts can be decoupled and reused as individual components on the pages you require.

All the chart examples have their component structure pre-written in case you want to try them in an existing project. The library was first released in 2016 but is still in active development.

Recharts Example

 

See the Pen ReCharts by binu (@binutomy) on CodePen.

 

Summary

Almost all (apart from a few niche ones) charting libraries listed in this article have extensive documentation files, and plenty of tutorials and YouTube videos to complement the learning curve.

If you're looking for something simple, we covered that. If you're looking for something complex, we covered that too. And we also got a chance to cover charting libraries for business purposes.

Last but not least, there are projects like Apache Superset and Metabase, both of which have a substantial part of their codebase written in JavaScript and TypeScript.

However, because of the nature of those libraries (querying SQL through a GUI to visualize it) - I don't think they're a great fit for this article, and perhaps that's a topic idea for the future.