Javascript Chart Library - Open-source Projects
Tags: webdev, javascript, charts, opensource
Published: 2021-03-21 14:52:26

---
title: Javascript Chart Library - Open-source Projects
published: true
description: A curated list with Javascript Chart Libraries we can use for free in our project to showcase the information visually and interactive. 
tags: webdev, javascript, charts, opensource
cover_image: https://raw.githubusercontent.com/admin-dashboards/javascript-chart-library/main/media/chartsjs-randomize-chart-intro.gif
canonical_url: https://blog.appseed.us/javascript-chart-library-open-source/
---
Hello Coders,

This article presents a curated list with open-source **[Javascript Chart Libraries](https://blog.appseed.us/javascript-chart-library-open-source/)** we can use without much effort to showcase relevant information in our projects. Initially, the list was bigger (10+ items) but I decided to remove all projects without a release or even a commit in the last 12mo despite the notoriety.  Using a **Chart Library** that consolidates and presents data visually might help people to understand a large amount of information and make better business decisions.

> *Thanks for reading!* - Content provided by **[App Generator](https://appseed.us/)**.

---

- [Chartjs](https://www.chartjs.org/) - Simple JavaScript charting for designers & devs
- [Google Charts](https://developers.google.com/chart/) - based on pure HTML5/SVG technology
- [Apache eCharts](https://echarts.apache.org/en/) - provides more than 20 chart types
- [D3](https://github.com/d3/d3) - JavaScript library for manipulating docs based on data
- [Toast Charts](https://ui.toast.com/tui-chart) - easy to use Charts.

---

![Javascript Chart Librariey - D3 Charts Sample with randomized data.](https://raw.githubusercontent.com/admin-dashboards/javascript-chart-library/main/media/d3-randomize-chart-intro.gif)

---

## [ChartJS Library](https://www.chartjs.org/)

Chart.js is a community-maintained project, with 52k+ Github stars and 350+ contributors. Using this chart library we can visualize your data in 8 different ways, each one with specific options regarding customization. Chart.js can be integrated with plain JavaScript or with different module loaders: CDN usage, local (via download), or using bundlers (Webpack, Rollup).

---

- [ChartJS](https://www.chartjs.org/) - the official website
- ChartJS Samples: [Radar](https://www.chartjs.org/samples/latest/charts/area/radar.html), [Polar Area](https://www.chartjs.org/samples/latest/charts/polar-area.html), Simple [Bar Charts](https://www.chartjs.org/samples/latest/charts/bar/vertical.html)

---

![Javascript Library - ChartJS Bar chart sample.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wgvn4hfr5tixtq61d64.png)

---

## [Google Charts](https://developers.google.com/chart)

Google Charts provides a simple way to visualize data on different patterns starting from [bar](https://developers.google.com/chart/interactive/docs/gallery/barchart) and [area charts](https://developers.google.com/chart/interactive/docs/gallery/areachart) to complex ones like [GeoChart](https://developers.google.com/chart/interactive/docs/gallery/geochart) and [Gauge](https://developers.google.com/chart/interactive/docs/gallery/gauge) (speedometer) - full list here.  Charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. All of them are interactive and zoomable. 

---

- [Google Charts](https://developers.google.com/chart) - homepage
- [Getting Starting Guide](https://developers.google.com/chart/interactive/docs/quick_start) - docs entry point

---

![Google Charts - Multiple types.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amuqw4brrvff2pbdn2sl.png)
 
---

## [Apache ECharts](https://echarts.apache.org/en/)

Apache ECharts provides more than 20 chart types available out of the box, along with a dozen components, and each of them can be arbitrarily combined to use.  The default design follows visualization principles, supports responsive design. Flexible configurations make it easy to customize.

---

- [Apache ECharts](https://echarts.apache.org/en/) - project homepage
- [ECharts Samples](https://echarts.apache.org/examples/en/index.html) - interactive index

--- 
 
![Javascript Chart Library - ECharts, gradient randomization sample.](https://raw.githubusercontent.com/admin-dashboards/javascript-chart-library/main/media/apache-charts-gradient-intro.gif)

---

## [ToastUI Charts](https://github.com/nhn/tui.chart)

TOAST UI Chart is a Beautiful Statistical Data Visualization library with versions for [React](https://github.com/nhn/tui.chart/tree/main/apps/react-chart) and [Vue](https://github.com/nhn/tui.chart/tree/main/apps/vue-chart). TOAST UI Chart makes your data pop and presents it in a manner that is easy to understand. Furthermore, it provides a wide range of theme options for customizing the charts to be suitable for all of your services. Chart components like the title, axes, legends, tooltips, plots, series, and more can be customized through the options.

---

- [ToastUI Charts](https://github.com/nhn/tui.chart) - official repository
- [ToastUI Charts](https://ui.toast.com/tui-chart) - official website

---

![Toast Charts - Javascript Chart Library sample.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wchl5osrhd9l90p6wxn.png)

---

## [D3 Charts](https://d3js.org/)

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

---

- [D3 Charts](https://d3js.org/) - official HOMEpage
- [D3 Samples](https://observablehq.com/@d3/gallery) - many interactive samples

---

![Javascript Chart Library - D3 Charts, interactive sample.](https://raw.githubusercontent.com/admin-dashboards/javascript-chart-library/main/media/d3-charts-interactive-intro.gif)

---

> Thanks for reading! For more resources please access:

- [JavaScript chart libraries for 2019](https://www.freecodecamp.org/news/these-are-the-best-javascript-chart-libraries-for-2019-29782f5e1dc2/) - related content with more libraries
- [AppSeed](https://appseed.us) - for production-ready starters and support