Top JavaScript Charting Libraries

Filters

Top 5 Projects Compared

Chart.js
64,341

Chart.js is a popular open-source JavaScript library for creating responsive and customizable charts and graphs.

Code Example

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'bar',
    data: { labels: ['A', 'B', 'C'], datasets: [{ data: [1, 2, 3] }] }
});

Pros

Easy to use with a simple API and extensive documentation
Lightweight and performant compared to some alternatives like Highcharts or D3.js
Offers a wide range of chart types and customization options out of the box

Cons

Limited advanced features compared to more complex libraries like D3.js
Less suitable for large datasets or real-time data visualization than some alternatives
Lacks some specialized chart types available in niche libraries like Britecharts or Billboard.js

recharts
23,673

Recharts is a composable charting library built on React components.

Code Example

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="pv" stroke="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="name" />
  <YAxis />
  <Tooltip />
</LineChart>

Pros

Seamless integration with React applications
Highly customizable and flexible chart components
Good performance due to its use of SVG elements

Cons

Limited to React-based projects
Fewer chart types compared to some other libraries like Chart.js or Highcharts
Learning curve can be steeper for developers not familiar with React concepts

dash
21,159

Plotly Dash is a Python framework for building analytical web applications with interactive visualizations.

Code Example

import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([dcc.Graph(id='example-graph')])

Pros

Combines the power of Plotly.js with React and Flask for full-stack web application development
Offers a wide range of built-in components for creating complex dashboards
Seamless integration with Python data science libraries like Pandas and NumPy

Cons

Steeper learning curve compared to simpler charting libraries like Chart.js or Recharts
May be overkill for basic visualization needs
Requires more setup and configuration than standalone JavaScript charting libraries

plotly.js
16,865

Plotly.js is a powerful JavaScript charting library that creates interactive, publication-quality graphs and charts for web applications.

Code Example

var data = [{x: [1, 2, 3], y: [2, 4, 8], type: 'scatter'}];
var layout = {title: 'Simple Line Chart'};
Plotly.newPlot('myDiv', data, layout);

Pros

Offers a wide variety of chart types and customization options, surpassing many other libraries in versatility
Provides excellent interactivity features out-of-the-box, including zooming, panning, and hover tooltips
Supports both 2D and 3D visualizations, setting it apart from libraries like Chart.js or Recharts

Cons

Has a larger file size compared to lightweight alternatives like Chart.js or Chartist
Steeper learning curve due to its extensive API, making it potentially overwhelming for beginners
While free for open-source use, commercial use requires a license, unlike some fully open-source alternatives

charts
14,928

Frappe Charts is a lightweight, modern, and interactive charting library for web applications.

Code Example

const chart = new frappe.Chart("#chart", {
  data: { labels: ["A", "B", "C"], datasets: [{ values: [18, 40, 30] }] },
  type: 'bar'
});

Pros

Simple and intuitive API, making it easy to create basic charts quickly
Lightweight and fast, with a small file size compared to some larger charting libraries
Modern and visually appealing design out of the box

Cons

Limited chart types and customization options compared to more comprehensive libraries like Chart.js or Highcharts
Lacks advanced features such as real-time updates or complex data visualizations found in libraries like Plotly.js
Smaller community and ecosystem compared to more established charting libraries, potentially resulting in fewer resources and third-party extensions

All Top Projects

Chart.js

64,341

Simple HTML5 Charts using the <canvas> tag

recharts

23,673

Redefined chart library built with React and D3

dash

21,159

Data Apps & Dashboards for Python. No JavaScript Required.

plotly.js

16,865

Open-source JavaScript charting library behind Plotly and Dash

charts

14,928

Simple, responsive, modern SVG Charts with zero dependencies

apexcharts.js

14,214

📊 Interactive JavaScript Charts built on SVG

chartist

13,341

Simple responsive charts

ag-grid

12,509

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

highcharts

11,975

Highcharts JS, the JavaScript charting framework

lightweight-charts

9,125

Performant financial charts built with HTML5 canvas

flowchart.js

8,526

Draws simple SVG flow chart diagrams from textual representation of the diagram

GoJS

7,682

JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

Visual Copilot
Promo

Turn Figma designs into high-quality code using AI

roughViz

6,704

Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

chartkick

6,329

Create beautiful JavaScript charts with one line of Ruby

flot

5,942

Attractive JavaScript charts for jQuery

billboard.js

5,825

📊 Re-usable, easy interface JavaScript chart library based on D3.js

pivottable

4,340

Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.

wireflow

3,936

Wireflow - user flow chart real-time collaborative tool

imove

3,750

INACTIVE: Move your mouse, generate code from flow chart

britecharts

3,742

Composable Charting Library based on reusable D3.js components.

docxtemplater

3,006

Generate docx, pptx, and xlsx from templates (Word, Powerpoint and Excel documents), from Node.js or the browser. Demo: https://www.docxtemplater.com/demo. #docx #office #generator #templating #report #json #generate #generation #template #create #pptx #docx #xlsx #react #vuejs #angularjs #browser #typescript #image #html #table #chart