JavaScript Chart Libraries: 13 Popular Choices

#1 – Chart.js

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

• Chart.js + Next.js = Beautiful, Data-Driven Dashboards
• Getting Started with Chart.js; Task-Based Learning

#2 – D3.js

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

• D3.js tutorial
• Building a D3.js Calendar Heatmap

#3 – 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

• Build a Better GitHub Insight Tool in a Week

#4 – 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

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:

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 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

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

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

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

• Financial charts for your application

#10 – Billboard

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

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.

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

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.

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

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.