Chart.js vs Recharts
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A JavaScript library for drawing simple, customizable charts on web pages using canvas.
Open source · MIT
A React charting library built on D3 for drawing charts from declarative components.
The short answer
Choose Chart.js if you need…
- Web developers adding standard charts such as line or bar charts to a site
- Designers who want chart styling they can configure in code
- Teams building dashboards in the browser who want an MIT-licensed library
Choose Recharts if you need…
- React developers who need standard charts such as line, bar or similar graphs in a web app
- Teams that prefer declarative, component-based chart code
- Single-page applications installed through npm
- Developers who want SVG-based charts with minimal dependencies
Side-by-side
| Chart.js | Recharts | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 67.8k | 27.7k |
| Setup difficulty | Intermediate | Beginner |
| How you get it | See the README | Install with a package manager |
| Main language | JavaScript | TypeScript |
| Last code update | 14 days ago | 4 days ago |
What each one is
Chart.js
Chart.js is a JavaScript library for adding charts to web pages. It draws charts on the HTML canvas element, so you pass it data and options and it renders the graphic in the browser. People use it to show data visually on websites and dashboards without building chart rendering from scratch.
Recharts
Recharts is a charting library for React applications, built on top of D3. You draw charts by composing React components such as a line chart, axes, a grid and a tooltip, each of which is a separate part you can combine. It renders charts as native SVG and is aimed at making charts in React apps straightforward.
Best for
Chart.js
- Web developers adding standard charts such as line or bar charts to a site
- Designers who want chart styling they can configure in code
- Teams building dashboards in the browser who want an MIT-licensed library
Recharts
- React developers who need standard charts such as line, bar or similar graphs in a web app
- Teams that prefer declarative, component-based chart code
- Single-page applications installed through npm
- Developers who want SVG-based charts with minimal dependencies
Strengths
Chart.js
- MIT licensed, so it can be used in commercial and open-source projects
- Large community with a documentation site, samples, and a Discord server linked from the README
- Actively maintained, with a recent release (v4.6.1) and a recent last push
Recharts
- Declarative API where each chart part is an independent React component
- Native SVG output with a stated focus on being lightweight with minimal dependencies
- MIT licensed with active development and a documentation site and storybook
Not ideal for
Chart.js
- People who need a finished chart tool with no coding, since this is a library that requires writing JavaScript
- Projects needing chart types or features the README does not describe, since the README here gives little detail on specific chart types
- Users who need charts rendered on a server, since the README describes browser canvas usage
Recharts
- Non-programmers who want to make charts without code, since it requires writing React components
- Projects not using React, because the library is built around React components
- Very large datasets needing canvas or GPU rendering, since the README only describes SVG support
Trade-offs
Chart.js
- Requires JavaScript and web page knowledge to use, so it is not beginner-friendly for non-coders
- The README is short and points to external docs for details, so getting started depends on those docs
- Documentation links in the README point to version 4; older versions need separate docs URLs
Recharts
- Only suited to React projects, so it does not fit other frameworks by default
- Installation asks you to also install react-is matching your React version, an extra step for beginners
- The README excerpt provides limited detail on specific chart types and advanced options; see the docs site
Getting started
Chart.js
Clone the repository
git clone https://github.com/chartjs/Chart.jsFrequently asked questions
What is the difference between Chart.js and Recharts?
Chart.js: A JavaScript library for drawing simple, customizable charts on web pages using canvas. Recharts: A React charting library built on D3 for drawing charts from declarative components. Chart.js suits web developers adding standard charts such as line or bar charts to a site, while Recharts suits react developers who need standard charts such as line, bar or similar graphs in a web app.
Are Chart.js and Recharts free?
Chart.js: Free and open source. Recharts: Free and open source.
Which is easier to set up, Chart.js or Recharts?
Recharts is easier to get started with (rated beginner); Chart.js is rated intermediate and usually needs more setup.
Is Chart.js or Recharts more popular?
Chart.js has more GitHub stars (67.8k) than Recharts (27.7k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Chart.js and Recharts?
Other options people compare them with include Plotly.js, Frappe Charts, G2, three.js, nivo.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.