feat(react-ui): add D3Charts alongside the Recharts charts

[ankit-thesys]

What

Adds the D3-based chart set to react-ui as components/D3Charts, next to the existing Recharts Charts/. This is the first step toward replacing the Recharts charts: the D3 charts take the same data contract (Array<Record<string, string | number>> + categoryKey / dataKey), so the genui-lib chart wrappers can switch over in a follow-up without prompt or schema changes. Nothing that exists today changes behaviour.

Changes

• src/components/D3Charts/: Area, Line, Bar (vertical and horizontal), Pie, Radial, Radar, Scatter, Heatmap, Funnel, SegmentedBar, CalendarHeatmap and MiniArea / MiniBar / MiniLine, plus StackedLegend / LegendStoreProvider, with their unit tests (36 files, 349 tests). They use react-ui's own ThemeProvider, Button, IconButton, Separator and PrintContext through internal imports.

• Class prefix: every class, keyframe and CSS variable is composed from CHART_CLASS_PREFIX / _prefix.scss, set to openui-d3. With plain openui, 65 class names would collide with the Recharts charts (legend, tooltip, scroll buttons, containers), because both stylesheets ship in components.css. When Recharts is removed, switching to openui is a two-line change. classPrefix.test.ts fails if anything hardcodes the prefix.

• Scroll buttons: their rules are nested under the buttons container (specificity 0,2,0), so they win over IconButton's single-class rules whatever order the stylesheets load in. The generated components/index.scss forwards D3Charts before IconButton.

• PPTX export: charts emit data-openui-chart, the same contract as the Recharts charts.

• Defaults match the Recharts charts, so the D3 chart renders what the Recharts one does for the same props:

  • Stacked areas keep one running total per row (Recharts' default stackOffset), so a negative value lowers the stack rather than dropping below zero. Bars keep stacking by sign, as Recharts' stackOffset="sign" does.
  • Pie and Radial get legendVariant ("default" | "stacked", default "stacked"): a built-in stacked legend with each item's share, side by side from 400px wide and below the chart when narrower. An external legendKey still takes over.
  • SegmentedBar defaults to the compact legend, as SingleStackedBar does.
  • Radar gets variant ("line" | "area", default "line") and areaOpacity (default 0.2), dots are off by default, and the grid is solid.

• X-axis labels (Area, Line, Bar): the chart keeps its height whatever the labels are. The label band takes at most half of it, and labels that don't fit are truncated with an ellipsis, with the full text on hover.

  • Condensed charts default to one horizontal line of labels, as the Recharts condensed charts do.
  • tickVariant="angled" is now accepted: it rotates labels 45° when they don't fit horizontally.
  • When a category is too narrow for a readable label, only every n-th label is drawn.

  This deliberately differs from Recharts, which makes the chart taller to fit tilted labels (668px in the big-labels story) and so breaks fixed-height layouts such as grids.

• Mini charts: MiniAreaChart, MiniBarChart, MiniLineChart take the Recharts minis' props and match them point for point: the same most-recent-values-that-fit rule, square frame, gradient area, right-aligned 8px bars with the inner line, and 2px line. That includes Recharts' own rounding of the value range (recharts-scale), which rounds higher than d3's .nice() and shows directly as mark height without an axis. Unit tests pin coordinates measured from the Recharts minis.

• Stories: every Recharts chart story (124 stories in 15 files) is copied under Components/D3Charts/…, changing only the chart import and the title. The import points at stories/rechartsStoryAdapters, which exports the Recharts chart names typed with the Recharts props and renders the D3 replacement. So each story renders the D3 chart with its args unchanged, and every copy type-checks against the Recharts props. This adds roughly 15k lines of copied story code; stories aren't part of the build.

• Dependencies: d3-scale, d3-selection, d3-shape (+ @types). The lockfile diff contains only these entries.

• tsconfig.build.json: excludes colocated *.test.ts(x). They were being compiled into dist/, and vitest then ran the compiled copies too. This also affects the existing Charts/shared/LineInBarShape test.

• Exports: not added to the root index.ts. The charts are reachable through the existing ./* subpath (import { AreaChart } from "@openuidev/react-ui/D3Charts"), and their styles are in components.css and styles/d3Charts.css.

• Changeset: @openuidev/react-ui patch.

Test Plan

• pnpm install --frozen-lockfile, pnpm run build:packages and pnpm --filter "./packages/**" run ci all pass. Lint output is warnings only, all of which already exist on main; none are in D3Charts. tsc --noEmit is clean with both tsconfig.json and tsconfig.test.json.

• react-ui vitest: 395 tests pass, 349 of them new.

• Storybook parity (QA apps/visualization-bench, storybook project): each of the 124 Recharts stories is paired with its D3 copy. There are no page or console errors on the D3 side, marks are drawn wherever Recharts draws them, no Area/Bar/Line plot is squeezed below half its chart's height, and the legend and series names match in every story. Screenshots of both sides were reviewed.

• Recharts parity (QA apps/visualization-bench, /parity): 19 Recharts/D3 pairs in light and dark, fed the props react-ui's genui-lib wrappers pass. Both sides render with no errors and show the same categories and series in the same order. All 19 pairs pass, and the Mini charts now have D3 counterparts.

• CSS parity: the compiled d3Charts.css is identical to the original implementation's stylesheet apart from the prefix. I rendered 15 cases in Storybook and in the original implementation with the same props: all 11 charts, plus a 40-point scrolling line chart, a 14-series overflowing legend and a 16-slice pie with StackedLegend. Computed styles and boxes of all 1,622 elements match in both light and dark mode.

• Load order: I audited every chart element that is also a react-ui Button, IconButton or Separator in default, hover and disabled states, comparing the bundled order with chart CSS loaded last. The only value that still depends on order is the background of disabled scroll buttons, which are visibility: hidden.

• browser-bundle: none of the D3Charts JS ends up in openui-bundle.min.js. openui-styles.css grows by about 28 KB because it now includes the D3 styles.

• Not applicable (explain why)

• Verified locally

Checklist

• I linked a related issue, if applicable
• I updated docs/README when needed: not yet; D3Charts gets documented when it replaces the Recharts charts
• I considered backwards compatibility: additive only; the Recharts charts, genui-lib and the root exports are untouched

Follow-ups (not in this PR)

• Differences the story copies make visible, not changed here:

  • named theme palettes (theme="emerald" etc.) are ignored, so colours come from the ThemeProvider palette;
  • Pie/Radial geometry: Recharts' donut ring is thinner, its first slice starts elsewhere, and its radial rings are thinner;
  • the scrollable BarChart narrows bars to fit many categories (Recharts keeps 16px and scrolls);
  • the Area/Line "step" variant uses step-after (Recharts steps at the midpoint);
  • SegmentedBar takes its palette ramp in order rather than distributed.

• Point the genui-lib/Charts wrappers at D3Charts.

• The Recharts Charts/ scroll buttons have the same load-order issue (their background resolves to transparent in components.css).

• components/ChartsV2/ on main contains only a stale ARCHITECTURE.md.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
openui-docs	Ready	Preview	Sep 29, 2026 12:53pm UTC

[i-subham23]

Looks Good