REAVIZ is an Apache-2.0 chart component library for React, maintained by @goodcodeus, that renders charts natively in React while using D3js under the hood for calculations — made for TypeScript developers who need customizable charts inside an existing React application.

What it is

REAVIZ is a modular chart component library in the React ecosystem, written in TypeScript and released under the Apache-2.0 licence. Charts are React components: React handles rendering, D3js handles the calculations underneath. The repository shows roughly 1,250 stars, 124 forks, and 32 open issues, with the most recent push on 10 August 2026. Documentation sits at reaviz.dev/docs, a gallery of examples at reaviz.dev/blocks, and interactive component demos in Storybook.

The problem it solves is the wiring cost of bespoke charting. Building a chart directly on D3 means assembling scales, axes, and paths by hand for every visualization. REAVIZ replaces that scaffolding with imports — import { BarChart } from 'reaviz' plus an array of { key, data } objects — while keeping customization available through configurable axes, tooltips, gestures, and label positioning.

Key capabilities

• Wide chart coverage, including Bar Chart variants (single series, multi series, stacked, stacked normalized, stacked diverging, Marimekko, radial, waterfall), Line and Area charts with sparklines, Scatter Plot, Sankey Chart, Gauge, Heatmap with year and month calendar layouts, Venn Diagram with Euler and fixed Euler modes, Treemap, Sunburst Chart, Funnel Chart, Bubble Chart, and Word Cloud.
• Interaction gestures — pinch, pan, zoom, and move — alongside tooltips for single values and grouped values.
• Styling and annotation primitives: patterns, gradients, grid lines, mark lines, range lines, bar guidelines, and line/area series symbols.
• Animation for enter, update, and exit transitions, plus animated counts and brush selection.
• Accessibility support for labels, roles, and tabbing, together with server-side rendering and BigInt support.
• Auto sizing for responsive layouts, discrete and sequential legends, and linear or radial axes.

Who uses it and how

• React and TypeScript product teams that embed charts directly in application code rather than exporting images from a separate BI product.
• Dashboard builders needing compact primitives such as Bar List, Meter, Sparkline, and Gauge for KPI tiles.
• Analytics and security monitoring teams: the README's example data uses keys 'IDS', 'Malware', and 'DLP'.
• Developers exploring components locally by cloning the repository and running npm start, which opens Storybook in the browser.
• Applications already built on the maintainer's sibling projects: Reagraph for WebGL network graphs, Reablocks for Tailwind-based React components, Reaflow for workflow diagrams, and Reachat for LLM/chat interfaces.

Getting started

Install with npm i reaviz --save, then import a chart such as import { BarChart } from 'reaviz' into a JSX element. Local development means cloning the repository, running npm i, then npm start to open Storybook.

How it compares

No competing charting libraries and no paid products appear in the available facts, so REAVIZ stands alone in this registry on that axis, with no licence, hosting, or pricing contrast to draw. Four sibling open-source projects from the same maintainer — Reagraph, Reablocks, Reaflow, and Reachat — are complementary rather than alternative, since none of them is a general-purpose chart library.

When to use it — and when not to

Adoption adds one npm dependency to an existing React build, with no database, storage, or mail service to operate. Teams outside React, or those wanting a no-code reporting tool rather than components to compose, should look elsewhere. The weakness worth noting is documentation depth: the README itself offers an install command, a short snippet, and links to the website, Storybook, and Blocks gallery, so the real reference material lives off-repository.

npm i reaviz --save

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} />;