visx
A set of reusable React building blocks for drawing custom charts, built on d3 math.
- Stars
- 21.1k
- Forks
- 775
- Licence
- MIT
- Language
- TypeScript
- Last update
- 5 months ago
- Type
- Library
What it is
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.
- Draw a bar graph from a data array using scale and shape components
- Build a set of company-specific chart components for internal dashboards
- Combine visx pieces into a custom one-off chart the standard libraries cannot produce
- Browse the gallery of example charts on the project site for inspiration
Great for
- 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
Not ideal for
- 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
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React 18 or 19
Install the packages used in the README example
npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale - 2
Run it
- Install the packages with npm.
- Import a component such as Bar from @visx/shape and a scale such as scaleBand from @visx/scale.
- Compute width, height and margins, then create x and y scales from your data.
- Render the bars inside an svg element, as shown in the README bar graph example.
- Browse the gallery on the docs site for more examples to adapt.
- 3
Get the most out of it
- Use the gallery at airbnb.io/visx/gallery to find working examples to adapt
- Read the docs at airbnb.io/visx for the full component reference
- Wrap visx components in your own React components to create a reusable team chart library, as the README suggests
- Add any React animation library you already use, since visx does not include animation
- Import only the @visx packages you need to keep bundle size down
Downloads
Strengths
- 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
Trade-offs
- 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)
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| visx (this) | 21.1k | Library | intermediate | 5 months ago | React developers who want full control over how a chart looks and behaves |
| recharts | 27.7k | Library | beginner | 4 days ago | React developers who need standard charts such as line, bar or similar graphs in a web app |
| nivo | 14.1k | Library | intermediate | 4 months ago | React developers who need charts in a web app |
| plotly.js | 18.4k | Library | beginner | 7 days ago | Web developers who want interactive charts in their own site or app |
| G2 | 12.7k | Library | intermediate | 8 days ago | Front-end developers adding charts to a web dashboard |
| plotly.py | 18.9k | Library | beginner | 5 days ago | Python users who want hoverable, zoomable charts without writing JavaScript |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.