@visx/shape

@visx/shape is the primitives package of visx, an unopinionated collection of low-level visualization components from Airbnb that pairs D3’s math and shape generators with React’s rendering model. It exports composable SVG primitives — bars, lines, areas, arcs, pies, links, and stacks — that read positional data through configurable accessors and render as declarative React components instead of imperative D3 DOM manipulation.

Rather than shipping a complete charting library, @visx/shape hands developers the building blocks: Bar and BarRounded for column charts, LinePath/AreaClosed for line and area series, Arc/Pie for radial charts, Stack/BarStack for stacked series, and a family of Link components (horizontal/vertical/radial diagonal, curve, line, step) for tree and network diagrams. Teams compose these primitives with @visx/scale and @visx/group to build a fully custom chart library or a one-off chart without inheriting a heavyweight charting framework’s opinions.

What You Get

• Bar primitives (Bar, BarRounded, BarGroup, BarGroupHorizontal, BarStack, BarStackHorizontal) for column and stacked-bar charts
• Line and area primitives (Line, LinePath, LineRadial, Area, AreaClosed, AreaStack, SplitLinePath) for time-series and area charts
• Radial primitives (Arc, Pie, usePie) for donut, pie, and radial charts with accessor-driven layout
• A full Link family (LinkHorizontal/Vertical/Radial x diagonal/curve/line/step) for tree, dendrogram, and network diagrams
• Stack utilities (stackOffset, stackOrder) and raw shape-factory exports (arcPath, areaPath, linePath) for custom shape logic on top of D3

Common Use Cases

• Building a custom bar chart or dashboard column chart without adopting a full charting framework
• Rendering time-series line and area charts with configurable curves and accessors
• Visualizing hierarchical or network data with tree/dendrogram Link components
• Creating pie/donut charts with fine-grained control over arcs and labels
• Assembling a reusable in-house chart component library on top of low-level primitives

Under The Hood

Architecture @visx/shape is one package in a yarn-workspaces/lerna monorepo, structured as a flat set of stateless shape components under src/shapes (Bar, Arc, Pie, LinePath, Area, AreaClosed, AreaStack, Stack, BarStack, BarStackHorizontal, BarGroup, BarGroupHorizontal, BarRounded, Circle, Polygon, SplitLinePath, LineRadial, Line), a nested src/shapes/link tree covering diagonal/curve/line/step variants, and shared src/util modules (D3ShapeFactories, accessors, stackOffset, stackOrder). Every component funnels through the accessor pattern (getX/getY/getSource/getTarget) and the D3ShapeFactories wrapper around d3-shape generators, converting data plus accessor props into a path/d string rendered by a plain SVG element — no internal state or context, purely controlled re-render-on-props components. Because every shape delegates to the same factory and accessor layer, that layer is the single point that all consumers depend on.

Tech Stack TypeScript throughout (v5.7) with React 18/19 as peer dependencies, d3-shape math consumed indirectly through the internal @visx/vendor package (which pins and re-exports specific d3 submodules so the many @visx/* packages never disagree on d3 versions), and classnames for class composition. The monorepo builds each package to both CJS (lib/) and ESM (esm/) via Babel rather than tsc emit, uses tsc —build project references purely for type-checking, and is versioned/published through Lerna with Yarn v4 workspaces. CI runs on GitHub Actions with OIDC-based trusted npm publishing.

Code Quality @visx/shape ships a dedicated Vitest test file per shape component (18 test files covering Bar, Pie, Arc, Stack, BarStack, all Link variants, stackOrder/stackOffset utilities, etc.) using @testing-library/react and jsdom to assert rendered SVG output and prop behavior. Prop types are enforced through a shared AddSVGProps generic that merges each component’s custom props with native SVG element attributes for compile-time safety. ESLint (airbnb config plus jsx-a11y/react/unicorn plugins) and Prettier are enforced repo-wide, and naming is consistent (PascalCase components, matching *Props type exports, camelCase utilities). Error handling is minimal by design since these are pure/presentational components with little that can fail internally.

API Design The public API is deliberately small and consistent: one PascalCase component per shape, one matching exported *Props type, and no required provider or context wrapper — importing Bar or LinePath and passing data plus x/y accessors is enough to render. Full docs and a live example gallery are generated from the same source (scripts/generateDocs.ts, published to airbnb.io/visx), and components compose naturally with sibling packages like @visx/scale and @visx/group through the shared accessor/scale conventions, keeping cross-package integration low-friction for anyone assembling a custom chart on top of the primitives.