OSS TanbouOn this page
Overview
visx is a low-level visualization toolkit that exposes D3-style scales and shapes through React-friendly packages. Applications can combine bars, lines, axes, grids, tooltips, responsive layout, and higher-level XY charts to build custom visualizations rather than adopting a fixed chart API.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Use D3-style scale and shape calculations from React components
@visx/scale exposes scale functions while @visx/shape supplies SVG-oriented components such as Bar, LinePath, Area, and Pie. React owns DOM updates while visualization math remains reusable.
Install only the packages needed by the visualization
The monorepo separates shape, scale, axis, grid, tooltip, responsive, XY chart, and other concerns so applications can limit dependencies and API surface to what they use.
Sources: [1]
Build internal chart libraries or one-off custom visualizations
The project explicitly supports both reusable chart systems and bespoke charts and avoids forcing one animation or visual-style approach, leaving teams free to compose their own abstractions.
Sources: [1]
Best fit
Fits analytics and dashboard UIs that need detailed control over chart composition
It is useful when a predefined chart options API is too limiting and teams need precise control over layout, interaction, branding, and SVG composition inside React.
Sources: [1]
Before adoption
Version 4 requires React 18 or 19
The v4 README and release notes require React 18 or 19 and point v3 users to a migration guide. React 17 and earlier are outside the v4 peer range.
Version 4 includes D3 and toolchain breaking changes
The 4.0.0 release upgrades d3-shape and d3-path major versions, removes prop-types, and includes Node and TypeScript toolchain changes, so existing v3 projects should review both API and build-environment migrations.
Sources: [2]
Official sources
- [1]visx v4.0.0 README(2026-10-05)
- [2]visx v4.0.0 release(2026-10-05)
- [3]@visx/xychart 4.0.0 package metadata(2026-10-05)
- [4]@visx/shape v4 exports(2026-10-05)
- [5]@visx/scale v4 exports(2026-10-05)
- [6]visx MIT license(2026-10-05)
Supplemental curator note
visx is a toolkit for composing custom visualizations rather than a finished chart product. Install only the packages you need and review the v4 migration guide when upgrading.
Try it in 3 steps
- 1
Install a minimal pinned visx 4.0.0 set
Create an isolated npm project with shape/scale packages and exact React peer dependencies.
demo=$(mktemp -d "${TMPDIR:-/tmp}/visx.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @visx/shape@4.0.0 @visx/scale@4.0.0 react@19.2.0 react-dom@19.2.0 - 2
Verify a scale calculation
Without a DOM, require a linear 0–10 to 0–100 scale to map the midpoint to 50.
test "$(node --input-type=module -e "import {scaleLinear} from '@visx/scale'; console.log(scaleLinear({domain:[0,10],range:[0,100]})(5))")" = '50' - 3
Check representative SVG shape exports
Verify Bar, LinePath, and Pie component exports.
test "$(node --input-type=module -e "import * as S from '@visx/shape'; console.log(['Bar','LinePath','Pie'].every(k=>k in S))")" = 'true'
Growth
Growth trends · Last 30 days
21,075 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 0
- Open PRs
- 40
Development activity is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- vx
- react
- d3
- visualization
- chart
- svg
- data-visualization
- visx
- Stars
- 21,075
- Forks
- 772
- Watchers
- 136
- Open issues
- 116
- Contributors
- 161
- Owner type
- Organization
- Primary language
- TypeScript
- License
- MIT
- Repository last updated
- Jun 22, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Ant Design99,682 Stars
3 shared tag(s) · Same language
build enterprise React interfaces quickly with ready-made components, design tokens, theming, and internationalization
TypeScript - Storybook91,200 Stars
3 shared tag(s) · Same language
capture UI states once and reuse them across docs, interaction tests, and agent tooling
TypeScript - Zustand58,786 Stars
3 shared tag(s) · Same language
manage React state with provider-free hook stores and subscribe through selectors
TypeScript - React Router56,590 Stars
3 shared tag(s) · Same language
multi-strategy routing for URLs, nested routes, navigation, and data flow in React applications
TypeScript - Expo52,566 Stars
3 shared tag(s) · Same language
build React Native apps for Android, iOS, and web from one project model
TypeScript - styled-components41,099 Stars
3 shared tag(s) · Same language
CSS-in-JS for React using tagged templates with scoped styles, theming, SSR, and React Native support
TypeScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.