ant-design-charts

@ant-design/charts is a facade package that re-exports two sibling AntV libraries — @ant-design/plots (34+ statistical chart types built on the G2 visualization engine) and @ant-design/graphs (8 relational diagram types like mind maps, org charts, and flow graphs built on G6) — behind a single React import. Each chart ships as a typed React component (Line, Column, Pie, Heatmap, Sankey, MindMap, OrganizationChart, and more) that wraps the underlying G2/G6 runtime, so consumers write declarative props instead of imperative chart configuration.

Maintained by the Ant Design / AntV team at Ant Group, it is published as a pnpm-workspace monorepo with independently versioned sub-packages for plots, graphs, and shared utilities (charts-util), so teams can install just @ant-design/plots or @ant-design/graphs directly if they only need one half of the library.

What You Get

• 34+ statistical plot components — Line, Column, Bar, Area, Pie, Scatter, Heatmap, Sankey, Treemap, Waterfall, and more, all built on G2
• 8 relational graph components — MindMap, OrganizationChart, FlowGraph, Dendrogram, IndentedTree, NetworkGraph, Fishbone, and FlowDirectionGraph, built on G6
• Typed React props for every chart, so configuration is declarative (xField/yField, data) instead of hand-rolled canvas or SVG code
• A shared charts-util package (e.g. measureTextWidth) so text-measurement and layout helpers stay consistent across every chart type
• A ConfigProvider and annotation controller for theming and adding markers/regions across chart types without per-chart boilerplate

Common Use Cases

• Building analytics dashboards that mix statistical charts (revenue trends, funnel conversion) with relational views (org charts, mind maps) in one design system
• Rendering exploratory BI-style data visualization without hand-coding G2/G6 configuration
• Visualizing hierarchical or network data — file trees, dependency graphs, decision trees — via the graphs sub-package
• Prototyping chart-heavy admin panels alongside Ant Design’s component library for visual consistency

Under The Hood

Architecture The monorepo is layered: packages/charts is a thin re-export facade over the packages/plots and packages/graphs workspace packages, each of which has its own core/ (an abstract Plot base class wrapping G2’s Runtime/Chart, or a BaseGraph class wrapping G6) plus a components/ directory with one folder per chart type exposing a typed React component around that core class, and an adaptor/ layer that turns declarative props into G2/G6 specs via a data-transform pipeline. Shared cross-cutting concerns (like text measurement) live in a separate charts-util package. This is a solid, modular design — plots and graphs are independently versioned and installable, and every chart follows the same three-tier pattern (React component → adaptor → core Plot/Graph class → G2/G6 engine) — though the top-level charts package adds no logic beyond re-exporting, so understanding any given chart requires looking one level down into its sub-package.

Tech Stack TypeScript throughout, React as a peer dependency (>=16.8.4), and AntV’s own G2 (plus @antv/g2-extension-plot) and G6 as the underlying rendering engines for plots and graphs respectively. Builds run through webpack for the UMD/dist bundle and tsc for separate CJS (lib) and ESM (es) outputs. The repo is a pnpm workspace using Changesets for versioning and release, with ESLint (via @umijs/fabric config), Prettier, and Stylelint enforcing style.

Code Quality Testing exists but is unevenly distributed across sub-packages: packages/graphs has both Jest unit tests and Playwright visual-regression specs with committed per-chromium PNG snapshots covering variants of each graph type (mind maps, org charts, dendrograms, flow graphs, and more), while packages/plots has Jest-based spec files for a handful of plot types (column, sunburst, circle-packing, ref) plus a couple of utility specs — modest coverage relative to the 34 statistical plot types it exposes. The TypeScript config deliberately relaxes strictness (strict: false, noImplicitAny: false, noUnusedLocals: false), trading type safety for flexibility across many chart-specific option shapes. Lint and test workflows run in CI (lint.yml, test.yml).

What Makes It Unique The declarative field-mapping API (xField/yField/colorField over a flat data array) is a familiar convention shared with other chart libraries, but the notable design choice is unifying two distinct visualization engines — G2 for statistical plots and G6 for relational graphs — behind one consistent component-and-props convention, and factoring their common concerns into an installable charts-util package so the plots and graphs halves can be adopted independently rather than as one monolithic bundle.