Top JavaScript Charting Libraries

Filters

Top 5 Projects Compared

Chart.js
65,005

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

Simple and intuitive API, making it easy for beginners to create charts quickly
Lightweight and performant compared to some alternatives like Highcharts or Plotly
Extensive documentation and active community support

Cons

Limited advanced features compared to more comprehensive libraries like D3.js
Fewer chart types available out-of-the-box compared to some alternatives like ApexCharts
Less suitable for complex, interactive data visualizations compared to libraries like Plotly

recharts
24,279

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 />
  <Legend />
</LineChart>

Pros

Seamless integration with React applications, leveraging React's component model
Highly customizable and flexible, allowing for complex chart compositions
Good performance due to its use of SVG elements 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
21,687

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

Offers a comprehensive solution for building full-stack data visualization applications
Integrates seamlessly with Plotly.js for creating interactive and customizable charts
Provides a wide range of pre-built components for rapid development

Cons

Steeper learning curve compared to simpler charting libraries like Chart.js or Recharts
May be overkill for basic charting needs or static visualizations
Requires more setup and configuration than lightweight alternatives

plotly.js
17,169

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, including zooming, panning, and hover tooltips out of the box.
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.
File size is larger than some alternatives, which may impact load times for web applications.
Can be more resource-intensive for rendering complex visualizations compared to lightweight options like Lightweight Charts.

charts
14,954

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

Code Example

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

Pros

Simple and intuitive API for creating charts quickly
Lightweight and fast-rendering compared to some heavier alternatives
Supports interactive features like tooltips and animations out of the box

Cons

Limited chart types compared to more comprehensive libraries like Chart.js or Highcharts
Less customization options for advanced visualizations
Smaller community and ecosystem compared to more established charting libraries

All Top Projects

Chart.js

65,005

Simple HTML5 Charts using the <canvas> tag

recharts

24,279

Redefined chart library built with React and D3

dash

21,687

Data Apps & Dashboards for Python. No JavaScript Required.

plotly.js

17,169

Open-source JavaScript charting library behind Plotly and Dash

charts

14,954

Simple, responsive, modern SVG Charts with zero dependencies

apexcharts.js

14,506

📊 Interactive JavaScript Charts built on SVG

chartist

13,354

Simple responsive charts

ag-grid

13,057

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

highcharts

12,099

Highcharts JS, the JavaScript charting framework

lightweight-charts

10,078

Performant financial charts built with HTML5 canvas

LogicFlow

8,955

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

flowchart.js

8,582

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

7,865

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

roughViz

6,747

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

chartkick

6,363

Create beautiful JavaScript charts with one line of Ruby

flot

5,942

Attractive JavaScript charts for jQuery

billboard.js

5,854

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

pivottable

4,365

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

wireflow

4,018

Wireflow - user flow chart real-time collaborative tool

imove

3,752

INACTIVE: Move your mouse, generate code from flow chart

britecharts

3,736

Composable Charting Library based on reusable D3.js components.

docxtemplater

3,097

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