Top JavaScript Charting Libraries

Filters

Top 5 Projects Compared

Chart.js
65,576

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 and learn, with clear documentation and a simple API
Lightweight and performant, with a small file size compared to some alternatives
Highly customizable, offering a wide range of chart types and styling options

Cons

Limited advanced features compared to more complex libraries like Highcharts or D3.js
Less suitable for large datasets or real-time data visualization than some alternatives
Lacks some specialized chart types available in niche libraries (e.g., financial charts in TradingView)

recharts
24,874

Recharts is a composable charting library built on React components.

Code Example

import { LineChart, Line, XAxis, YAxis } from 'recharts';
const data = [{ name: 'A', value: 10 }, { name: 'B', value: 20 }];
<LineChart data={data}><XAxis dataKey="name" /><YAxis /><Line dataKey="value" /></LineChart>

Pros

Seamless integration with React applications, leveraging React's component model
Highly customizable and flexible, allowing for complex chart configurations
Good performance due to its use of SVG and React's virtual DOM

Cons

Limited to React applications, not suitable for non-React projects
Steeper learning curve compared to some simpler charting libraries
Less extensive documentation and community support compared to more established libraries like Chart.js or Highcharts

dash
22,215

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

Integrates seamlessly with Plotly's powerful charting library, offering a wide range of interactive and customizable visualizations
Provides a full-stack solution for building data applications, combining frontend and backend in a single Python framework
Offers reactive programming capabilities, allowing for the creation of dynamic, data-driven applications

Cons

Steeper learning curve compared to some simpler charting libraries like Chart.js or Recharts
May be overkill for basic charting needs, as it's designed for building full-fledged web applications
Performance can be slower than lightweight alternatives, especially for large datasets or complex applications

plotly.js
17,449

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, 6, 3], type: 'scatter'}];
var layout = {title: 'Simple Scatter Plot'};
Plotly.newPlot('myDiv', data, layout);

Pros

Offers a wide range of chart types and customization options, surpassing many competitors 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 steeper learning curve compared to simpler libraries like Chart.js or Chartist
Larger file size than some alternatives, which may impact page load times for performance-critical applications
Can be more resource-intensive for rendering complex charts, potentially affecting performance on low-end devices

charts
14,992

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 charts quickly
Lightweight and fast-rendering, suitable for performance-sensitive applications
Aesthetically pleasing default design with minimal configuration required

Cons

Limited chart types compared to more comprehensive libraries like Chart.js or Highcharts
Fewer customization options than some of the more advanced charting libraries
Smaller community and ecosystem compared to more established projects like D3.js or Plotly

All Top Projects

Chart.js

65,576

Simple HTML5 Charts using the <canvas> tag

recharts

24,874

Redefined chart library built with React and D3

dash

22,215

Data Apps & Dashboards for Python. No JavaScript Required.

plotly.js

17,449

Open-source JavaScript charting library behind Plotly and Dash

charts

14,992

Simple, responsive, modern SVG Charts with zero dependencies

apexcharts.js

14,695

📊 Interactive JavaScript Charts built on SVG

ag-grid

13,668

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

chartist

13,357

Simple responsive charts

highcharts

12,192

Highcharts JS, the JavaScript charting framework

lightweight-charts

11,074

Performant financial charts built with HTML5 canvas

LogicFlow

9,584

A flow chart editing framework focus on business customization. 专注于业务自定义的流程图编辑框架，支持实现脑图、ER图、UML、工作流等各种图编辑场景。

flowchart.js

8,615

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

Visual Copilot
Promo

Turn Figma designs into high-quality code using AI

GoJS

8,036

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

roughViz

6,770

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

chartkick

6,411

Create beautiful JavaScript charts with one line of Ruby

flot

5,939

Attractive JavaScript charts for jQuery

billboard.js

5,899

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

pivottable

4,398

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

wireflow

4,072

Wireflow - user flow chart real-time collaborative tool

imove

3,746

INACTIVE: Move your mouse, generate code from flow chart

britecharts

3,732

Composable Charting Library based on reusable D3.js components.

docxtemplater

3,249

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