# reaviz: a React chart library that uses D3 for the maths and React for the rendering

> reaviz is an Apache-2.0 charting library for React that renders with React and computes with D3, giving you eighteen chart families including Sankey, treemap, sunburst, Venn and funnel, plus a sibling project called blocks for composing custom visualisations. The examples are Storybook stories, and the whole library is developed against a Storybook at port 9009.

**reaviz/reaviz** — 📊 Data visualization library for React. Maintained by @goodcodeus.

- Repository: https://github.com/reaviz/reaviz
- Website: https://reaviz.dev
- Stars: 1,253 · Forks: 124
- Language: TypeScript
- License: Apache-2.0
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/reaviz-reaviz

## The division of labour: React renders, D3 calculates

reaviz is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The library provides an easy way to get started creating charts without sacrificing customization ability.

That sentence is the whole design, and it is a meaningful choice in a crowded space. There are two ways to build a React chart library. One is to hand the data to D3 and let D3 manipulate the DOM, which gives you D3's full power but puts the DOM outside React's control, so every React concern has to be worked around. The other is to use D3 for what it is genuinely good at, which is scales, shapes, paths and the arithmetic of layout, and to let React own the rendering. The result is SVG elements that are React components, with props, state and event handlers, and a chart that composes like any other React tree.

The cost of the second approach is that you have to implement the rendering yourself, and the cost of the first is that you fight the framework. reaviz has chosen the second, and the feature list shows what that means in practice. Gestures include pinch, pan, zoom and move. Tooltips come in single value and grouped values variants. There are enter, update and exit animations. There is a brush. There is a legend with discrete and sequential variants, an axis with linear and radial variants plus advanced label positioning, and line and area series symbols.

The type is TypeScript, the primary language in the repository metadata, the licence is Apache-2.0, and the homepage is reaviz.dev. The repository is not archived, the last push was on 2026-08-10, and the package version in package.json is 16.2.2. There are no GitHub releases, so the npm version is the version reference.

The README also positions the library against a family of sibling projects, all under the same umbrella with the reaviz.dev domain in their URLs. Reagraph is an open source library for large webgl based network graphs. Reablocks is an open source component library for React based on Tailwind. Reflow is an open source library for workflow and diagram graphs. And Reachat is an open source library for building LLM and chat user interfaces for React.

That last one is the most relevant to a reader who is evaluating the ecosystem, because a chat interface and a chart library need the same primitives, and the fact that they are separate packages in the same family suggests a shared component layer rather than four unrelated codebases.

## Eighteen chart types, and the variants that matter

The chart type list is the most concrete part of the documentation, and the structure of it tells you how much of the layout work is done for you.

Bar charts have the widest set of variants: single series vertical or horizontal, multi series vertical or horizontal, stacked vertical or horizontal, stacked normalized vertical or horizontal, stacked diverging vertical or horizontal, plus Marimekko, radial, sparkline and waterfall. That is ten distinct bar chart types, and the pattern of them is telling. Stacked, stacked normalized and stacked diverging are the same layout with three different treatments of the stack, and vertical and horizontal are the same layout with the axes swapped, so a single layout engine with a few options produces all of them.

Line charts have single series, multi series, stacked, stacked normalized, radial and sparklines. Area charts have the same six. The symmetry between line and area is the point: they are the same geometry with a fill.

Then the specialised types. Scatter has linear and radial. Pie has standard and exploded, plus a donut chart. There is a Sankey chart, a map chart, a heatmap with standard, year calendar and month calendar variants, a Venn diagram with standard, Euler and fixed Euler variants, a bubble chart, a treemap, a bar list, a meter, a spider or radar chart, a funnel chart, a sunburst chart and a word cloud.

The two that will catch your attention are the Venn diagram and the heatmap, because both are hard. A Venn diagram with an Euler layout is a genuine set-theoretic layout problem, and shipping three variants including a fixed one suggests the author worked through the positioning. The calendar heatmap is a common dashboard pattern that is tedious to build well, and having it built means you do not have to.

The gauge is worth a note too, with radial, linear and stacked radial variants, which is a component that most libraries either omit or implement once and badly. A gauge that can be linear as well as radial is a component library with a designer behind it.

The remaining features are the ones that make a chart usable rather than merely drawable. Bar guidelines and range lines, mark lines, grid lines, patterns and gradients, animated counts, auto sizing, BigInt support, and accessibility support for labels, roles and tabbing. Server side rendering is supported as well, which is a requirement for a chart library used in a Next.js application.

## Using it, and the data shape the charts expect

Installation is the usual npm line:

```
npm i reaviz --save
```

And the example in the README is small enough to be the whole mental model:

```jsx
import { BarChart } from 'reaviz';

const data = [
  { key: 'IDS', data: 14 },
  { key: 'Malware', data: 5 },
  { key: 'DLP', data: 18 }
];

const App = () => <BarChart width={350} height={250} data={data} />;
```

Three things to take from that. The data is an array of flat objects with a key field and a data field, one entry per bar, rather than a nested structure of series and categories. The chart is given explicit width and height as props rather than filling its container, so the parent decides the size. And there is no configuration object, no options bag and no theme prop on the chart itself, because the chart is a React component and you configure it with JSX and props.

That last point is the payoff of the React-renders design. If you want a different axis, you pass a different child. If you want to put a legend somewhere specific, you render it where you want it. The library provides the chart geometry and the React elements, and the composition is yours.

The package exports are worth noting because they tell you about the shape of the library. The main entry is the index, and there are two subpath exports, ./stories/* and ./blocks/*. The stories export is the Storybook stories, which is a slightly unusual thing to ship but it means the examples are real components you can read, and the blocks export is the block API.

That brings us to blocks, which is the part of the project most worth understanding if you are not using one of the eighteen built in types. The blocks project is listed among the other projects, and the quick links point to a Blocks page on the documentation site. The idea of a blocks API is that the pieces the built in charts are made of, the axes, the series, the legend, the tooltip, the grid, the brush, are exported as individual components you can assemble into a visualisation that is not on the list.

The repository layout supports that reading. There is a blocks/ directory at the top level alongside src/, and the src/ directory is the library proper, while blocks/ is the composable layer. The .storybook/ directory at the root is where the stories live, and the docs/ directory holds the documentation site source.

## The blocks layer, and how to build a chart the library does not ship

The eighteen built in types are the obvious part of reaviz, and the more interesting part is what happens when your visualisation is not one of them.

The repository has a blocks/ directory at the top level, separate from src/, and the package exports a ./blocks/* subpath. The documentation site has a Blocks page, and the sibling project list includes Reablocks, a component library for React based on Tailwind.

The idea is a two layer design. The charts in src/ are assembled compositions, and the pieces they are assembled from are the blocks. An axis is a block, a series is a block, the legend is a block, the tooltip is a block, the grid is a block, the brush is a block. When one of the eighteen types is close to what you need, you use it. When it is not, you compose the blocks yourself.

That is a more useful API than a single monolithic Chart component with fifty options, and it is the direct consequence of the React rendering decision. If the internals are React components, they can be exported and composed, and the library does not have to anticipate every chart you might want. A library built on D3 manipulating the DOM cannot do this, because its internals are not components you can put on a page.

The practical question when you evaluate this is which blocks exist. The feature list gives a good hint, because the additional features section is essentially a list of the blocks: legend with discrete and sequential variants, axis with linear and radial variants and advanced label positioning, tooltips with single value and grouped values, line and area series symbols, animations with enter, update and exit, brush, patterns, gradients, grid lines, mark lines, bar guidelines, range lines and animated counts. Each of those is a piece you can place yourself.

The accessibility support is part of that list too, and it is worth reading closely: a11y support for labels, roles and tabbing. For a chart rendered as React components, that is achievable, because the elements are in the DOM with props you can set. It is much harder when a charting library paints to a canvas, and it is the kind of detail that separates a library you can use in a product from one that renders an image of a chart.

The remaining filters are the ones that determine whether a chart survives real data. BigInt support matters when your values are large identifiers rather than counts. Auto sizing means the chart can respond to its container rather than demanding fixed dimensions. SSR support means the chart does not break a server rendered page. And the docs are at reaviz.dev/docs with a Storybook at storybook.reaviz.dev, so there is a live component catalogue to browse rather than a list of screenshots.

## Storybook as the development and test harness

The development instructions are three lines, and the third one is the significant one.

Clone the repository, run npm i, then run npm start, and the browser opens to the Storybook page. The start script is storybook dev -p 9009, so the development server is Storybook on port 9009.

That port number recurs throughout the package scripts, and it tells you what the testing strategy is. There is a test-storybook script that runs test-storybook against http://127.0.0.1:9009 with --no-cache, and a test-storybook-single variant that adds --includeTags="single". The test-storybook tool drives a real browser against the running Storybook and takes screenshots, comparing them against baselines, which is how a chart library tests itself.

This is the right approach for this kind of library and there is no substitute for it. A chart's whole output is pixels, so a unit test that asserts on a computed layout says nothing about whether the chart looks right. A screenshot test catches the regression where a series renders off the plot area, where a label overlaps, where a gradient renders as black, and where an animation ends in the wrong state. Those are the bugs that actually get reported in chart libraries, and only a rendered comparison finds them.

The includeTags="single" variant is a nice detail. It selects a subset of the stories, presumably the single-series ones, for a faster run in some context, and the fact that the tags exist at all means the stories are tagged as a way of partitioning the suite.

The rest of the scripts show a modern setup. The build is vite build --mode library, followed by a rewrite:stories step that runs node scripts/stories.cjs, which is what produces the ./stories/* export. Linting is eslint on src, with an eslint.config.ts at the root, and prettier with a .prettierrc handles formatting. Type checking is a separate tsc --noEmit script, and the unit tests are vitest, with a test:ci variant that adds coverage and a --passWithNoTests flag, which is the honest admission that the unit test coverage is thin and the real coverage is the visual one.

The type field points at ./dist/index.d.ts, and the package is an ES module with type set to module, and the source field points at ./src/index.ts, so the source is published for source map resolution even though the files array only ships dist. The engines field requires Node 22.12.0 or newer, which is worth checking against your CI image before you upgrade, since it is the kind of floor that silently blocks an install.

The project also has a CLAUDE.md in the repository root alongside a .vscode/ directory and a .editorconfig, and there is a public/ directory for static assets and a test/ directory.

## Conclusion

reaviz fits a React team that wants charts rendered as real DOM elements with real React components, so tooltips, legends and axes can be customised with ordinary React code, and that has D3 available for scales and shapes. It is the wrong choice if you need a canvas or WebGL renderer for very large datasets, and the wrong choice if you want a batteries included dashboard rather than a component set. Before adopting, check the Node requirement of 22.12 or newer against your build environment, and look at the blocks package, because if your visualisation is not one of the eighteen built in types, the blocks API is probably the part you will actually use.

## FAQ

### What is reaviz and how does it use React and D3?

It is a modular chart component library that leverages React natively for rendering the components while using D3js under the hood for calculations. The intent is an easy way to get started creating charts without sacrificing customization ability, with the chart output being real React components rather than a D3 managed DOM.

### How do I install reaviz and render a bar chart?

Run npm i reaviz --save, then import the chart type and pass it data and explicit dimensions: import { BarChart } from 'reaviz' with a data array of objects each having a key and a data field, and render <BarChart width={350} height={250} data={data} />.

### Which chart types does reaviz support?

Bar charts in ten variants including multi series, stacked, stacked normalized, stacked diverging, Marimekko, radial, sparkline and waterfall. Line and area charts in six variants each, scatter, pie, donut, Sankey, map, heatmap with year and month calendar variants, Venn with Euler variants, bubble, treemap, bar list, meter, radar, funnel, sunburst, word cloud and gauge.

### How is reaviz tested?

With Storybook as the development harness, since npm start runs storybook dev on port 9009, and with test-storybook taking screenshot comparisons against that running instance. The unit tests are vitest, run with --passWithNoTests, which reflects that the visual regression suite carries most of the testing weight for a chart library.

## Sources

- [Issues](https://github.com/reaviz/reaviz/issues)
- [License: Apache-2.0](https://github.com/reaviz/reaviz/blob/master/LICENSE)
- [Project website](https://reaviz.dev)
- [README](https://github.com/reaviz/reaviz/blob/master/README.md)
- [reaviz/reaviz on GitHub](https://github.com/reaviz/reaviz)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/reaviz-reaviz