DEV Community

Cover image for Javascript Chart Library - Open-source Projects
Sm0ke
Sm0ke

Posted on • Updated on • Originally published at blog.appseed.us

Javascript Chart Library - Open-source Projects

Hello Coders,

This article presents a curated list with open-source Javascript Chart Libraries 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.


  • Chartjs - Simple JavaScript charting for designers & devs
  • Google Charts - based on pure HTML5/SVG technology
  • Apache eCharts - provides more than 20 chart types
  • D3 - JavaScript library for manipulating docs based on data
  • Toast Charts - easy to use Charts.

Javascript Chart Librariey - D3 Charts Sample with randomized data.


ChartJS Library

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



Javascript Library - ChartJS Bar chart sample.


Google Charts

Google Charts provides a simple way to visualize data on different patterns starting from bar and area charts to complex ones like GeoChart and 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 - Multiple types.


Apache ECharts

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.



Javascript Chart Library - ECharts, gradient randomization sample.


ToastUI Charts

TOAST UI Chart is a Beautiful Statistical Data Visualization library with versions for React and Vue. 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.



Toast Charts - Javascript Chart Library sample.


D3 Charts

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.



Javascript Chart Library - D3 Charts, interactive sample.


Thanks for reading! For more resources please access:

Top comments (18)

Collapse
 
lightningchartchetanak profile image
LightningChart-Chetana-K

Hey I think you should also add LightningChart JS arction.com/lightningchart-js-inte... to that list.
It comes with loads of features, with fast rendering utilizing effective algorithms and GPU acceleration using WebGL. So, one can plot millions of data points – even 100 million data points in real-time, and not have performance issues.
Check this out as they have simple and flexible API’s with a bunch of chart types that offer a lot of customization, you can create innumerable types of charts to visualize different kinds of data as per your requirements with good visualizations as well!

Collapse
 
sm0ke profile image
Sm0ke

Hello & Ty for your suggestion.
The product looks super nice .. but I don't see a free tier to use the library.
In case has one, please point me to take a look at the free/oss version.

Collapse
 
lightningchartchetanak profile image
LightningChart-Chetana-K

Checkout this free community license page : arction.com/community-license/
This may help you.

Thread Thread
 
sm0ke profile image
Sm0ke

Noted, Ty!

Collapse
 
uithemes profile image
ui-themes

Pretty amazing list. Thank you!
I used MorrisJS in my projects. Super easy to get started.

Collapse
 
sm0ke profile image
Sm0ke

Morris is also a really nice library. Too bad is not actively supported.

Collapse
 
uithemes profile image
ui-themes

Old versions are stable ..

Collapse
 
crearesite profile image
WebsiteMarket

Ty! Some real full-stack samples might help a lot.
P.S. Echarts demo looks amazing.

Collapse
 
sm0ke profile image
Sm0ke

Thanks for reading!
I'm coding a few open-source samples using ChartJS.

Collapse
 
crearesite profile image
WebsiteMarket

Ty!

Collapse
 
mafee6 profile image
Mafee7

Looks Nice!

Collapse
 
sm0ke profile image
Sm0ke

Ty!

Collapse
 
kevinschweikert profile image
Kevin Schweikert

If you are using Svelte, this could be very interesting: pancake-charts.surge.sh

Collapse
 
sm0ke profile image
Sm0ke

Looks good. Ty!
The SSR feature might help many backend devs to chart.

Collapse
 
4mitch profile image
Dima

Please consider Vega-Lite charts as well. It's fascinating! observablehq.com/@uwdata/introduct...

Collapse
 
sm0ke profile image
Sm0ke

Looks amazing. For sure I will take a look.
Ty!

Collapse
 
techguy profile image
Arun

Syncfusion JavaScript Charts component

Collapse
 
sm0ke profile image
Sm0ke

Looks nice! I don't see a free tier or an OSS version.
Anyway, I will take a look. Thanks for your suggestion.