Frappe Charts vs visx
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 small JavaScript library that draws responsive SVG charts with no other dependencies.
Open source · MIT
A set of reusable React building blocks for drawing custom charts, built on d3 math.
The short answer
Choose Frappe Charts if you need…
- Developers adding basic or medium-complexity charts to a web app
- Teams that want a small, dependency-free charting option
- Projects that need charts to resize across screen sizes
- Developers who want to update chart data in place
Choose visx if you need…
- React developers who want full control over how a chart looks and behaves
- Teams building their own reusable chart library on top of shared components
- Developers who already know d3 and want its math without its DOM update style
- Projects that want to keep bundle size small by importing only needed packages
Side-by-side
| Frappe Charts | visx | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 15.1k | 21.1k |
| Setup difficulty | Beginner | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | JavaScript | TypeScript |
| Last code update | 18 days ago | 5 months ago |
What each one is
Frappe Charts
Frappe Charts is a JavaScript charting library that draws charts as SVG graphics in a web page. Its API is designed to be simple, and its visual style is inspired by charts on GitHub. Developers use it to add bar, line, pie, area, percentage, mixed-axis, and heatmap charts to web apps without pulling in other libraries.
visx
visx is a collection of low-level visualization components for React. It uses d3 for the calculations and math, while React handles updating the page, so developers can build charts without writing d3 selection code by hand. You install only the small packages you need, such as shapes or scales, and combine them into your own charts.
Best for
Frappe Charts
- Developers adding basic or medium-complexity charts to a web app
- Teams that want a small, dependency-free charting option
- Projects that need charts to resize across screen sizes
- Developers who want to update chart data in place
visx
- React developers who want full control over how a chart looks and behaves
- Teams building their own reusable chart library on top of shared components
- Developers who already know d3 and want its math without its DOM update style
- Projects that want to keep bundle size small by importing only needed packages
Strengths
Frappe Charts
- Has zero dependencies, as stated in its description and README
- Supports many common chart types in one library
- Offers a simple API with configuration options for colors, animations and titles
visx
- Components are low-level and unopinionated, so you control the final look
- Lets you use d3 math without managing d3 selections or enter/exit/update logic
- Modular packages mean you only include what you use
Not ideal for
Frappe Charts
- Users needing highly specialized or 3D charts, since the README lists only the chart types above
- Projects that need a library with extensive built-in interactivity, because the README describes only annotations, tooltips and basic customization
visx
- People who want ready-made charts with no coding, since visx provides building blocks rather than finished charts
- Projects that need built-in animation, because the README says visx deliberately does not include animation and suggests using existing React animation libraries instead
- Projects not using React, since the components are built for React 18 or 19
Trade-offs
Frappe Charts
- The README is short and does not document every option, so details need to be checked in the separate documentation site
- The README does not state browser support or how it compares in performance to other libraries
visx
- Because it is low-level, you write more code than with a turnkey charting library
- No built-in animation; you must add a React animation library yourself if you want it
- Requires React 18 or 19 for the current v4 release, so older React projects need migration (see the migration guide)
Getting started
visx
Install the packages used in the README example
npm install --save @visx/mock-data @visx/group @visx/shape @visx/scaleFrequently asked questions
What is the difference between Frappe Charts and visx?
Frappe Charts: A small JavaScript library that draws responsive SVG charts with no other dependencies. visx: A set of reusable React building blocks for drawing custom charts, built on d3 math. Frappe Charts suits developers adding basic or medium-complexity charts to a web app, while visx suits react developers who want full control over how a chart looks and behaves.
Are Frappe Charts and visx free?
Frappe Charts: Free and open source. visx: Free and open source.
Which is easier to set up, Frappe Charts or visx?
Frappe Charts is easier to get started with (rated beginner); visx is rated intermediate and usually needs more setup.
Is Frappe Charts or visx more popular?
visx has more GitHub stars (21.1k) than Frappe Charts (15.1k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to Frappe Charts and visx?
Other options people compare them with include Chart.js, Recharts, G2, Simple mind map, 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.