Chart

chart

Wraps responsive Recharts area, bar, line, pie, radar, and radial charts with theme tokens, axis sizing, and series legends.

Usage

Area Chart

data + series + xKey three-piece set; multi-sequence overlay, color progression chart token adaptive light and dark.

tsx

<AreaChart
  data={data}
  series={[{ key: "revenue", label: "Revenue (thousand yuan)" }, { key: "orders", label: "Order" }]}
  xKey="month"
/>

Polyline / Column

The same data can be exchanged for LineChart / BarChart rendering.

tsx

<>
  <LineChart data={data} series={series} xKey="month" />
  <BarChart data={data} series={series} xKey="month" />
</>

Legend

Multi-sequence diagrams do not provide legends, so readers have no way of knowing which line is which sequence. legend opens a row of color points (take color from Dot, which is homologous to the sequence color); "top" / "bottom" selects the position. height is still the total height of the component - the canvas becomes shorter accordingly and does not increase the total height.

Revenue (thousand yuan)Order

tsx

<AreaChart data={data} series={series} xKey="month" legend />

Stacking

stacked enables multi-sequence stacking (Area/Bar takes effect).

tsx

<BarChart data={data} series={series} xKey="month" stacked />

Horizontal columnar (CJK category adaptive axis width)

horizontal Move the category to the Y axis. The axis width is adapted according to the longest label by default (CJK full-angle estimated width, 48–160px), and Chinese characters are no longer truncated; the transmission yAxisWidth must be accurately controlled.

tsx

<BarChart
  horizontal
  data={[
    { stage: "Audio Decoding", p50: 105 },
    { stage: "ASR identification", p50: 620 },
    { stage: "The first sentence of LLM", p50: 890 },
    { stage: "TTS first tone", p50: 760 },
  ]}
  xKey="stage"
  series={[{ key: "p50", label: "P50 Time-consuming (ms)" }]}
/>

Pie Chart/Donut

Flat {name,value} data; donut center hollowed.

SearchDirectSocial MediaRecommended

tsx

<>
  <PieChart data={[{ name: "Search", value: 420 }, { name: "Direct", value: 280 }]} />
  <PieChart donut data={[{ name: "Search", value: 420 }, { name: "Direct", value: 280 }]} />
</>

Radar chart

Comparison of multi-dimensional capabilities, xKey is the dimension field, multi-sequence superposition.

CurrentBenchmark

tsx

<RadarChart
  data={radarData}
  series={[{ key: "Current" }, { key: "Benchmark" }]}
  xKey="dim"
/>

When to use

Use Chart for complete dashboard trends, distributions, and comparisons with one or more series. Use Stat or Statistic for one KPI and Sparkline for a lightweight inline trend.

Import

import { AreaChart, BarChart, LineChart, PieChart, RadarChart, RadialChart, chartColor } from "@hulianui/ui"

Props

AreaChart / BarChart / LineChart / RadarChart (Cartesian)

Name	Type	Default	Description
data*	`TDatum[]`	—	Row data.
series*	`ChartSeries[]`	—	`{ key, label?, color? }`; colors default by index to chart tokens.
xKey*	`string`	—	Horizontal-axis field.
height	`number`	`280`	Explicit SSR-safe height.
stacked	`boolean`	`false`	Stacks AreaChart or BarChart series.
legend	`boolean \| "top" \| "bottom"`	`false` (`true` for RadarChart)	Series legend with a color dot and `label`. `true` is equivalent to `"bottom"`; `false` turns it off. Dot colors come from the same source as the series through Dot's `color` prop. The default splits by chart family: the Cartesian three default to off, while RadarChart defaults to on because it has always shipped a legend.
legendScroll	`boolean`	`false`	Keeps the legend on a single horizontally scrollable row (matching echarts' `legend.type: "scroll"`). The default wraps and centers, which stacks into several rows and squeezes the canvas once there are many series. Enable it beyond ~8 series.
horizontal	`boolean`	`false`	BarChart-only horizontal orientation.
yAxisWidth	`number`	Adaptive	BarChart-only category-axis width; horizontal mode estimates 48-160 px through `categoryAxisWidth`.
className	`string`	—	Custom class, commonly used for width.

PieChart / RadialChart (flat data)

Name	Type	Default	Description
data*	`ChartDatum[]`	—	Flat `{ name, value, color? }` data.
donut	`boolean`	`false`	Creates a center hole in PieChart.
height	`number`	`280`	Chart height.
legend	`boolean \| "top" \| "bottom"`	`true`	Legend built from `data[].name`, same semantics as above but on by default because these two have always shipped a legend. Pass `false` to turn it off — required before drawing your own, otherwise two legends render side by side.
legendScroll	`boolean`	`false`	Same as above: keeps the legend on a single horizontally scrollable row.
className	`string`	—	Custom class name.

Pitfalls

Width comes from the parent or className, but height must be nonzero; the default is 280.
ResponsiveContainer may measure zero inside shrinking flex layouts. Give the container explicit width; see [[recharts-responsive-container-needs-explicit-width-in-shrink-flex]].
Headless screenshots can starve the entrance-animation clip path and show only axes. Enable reduced motion before capture; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].
Adaptive horizontal category width caps at 160 px. Shorten very long labels or pass yAxisWidth explicitly.
height remains the component's total height when legend is enabled. The legend consumes a row and reduces the canvas height rather than increasing the total height. Once there are enough series to wrap, the legend stacks into several rows and keeps eating the canvas — do not try to absorb that by raising `height` (a 28-series legend is five rows; restoring a readable radar would mean doubling the total height). Enable legendScroll to keep the legend on one scrollable row.
For the polar three (Pie/Radar/Radial), legend defaults to `true`, the opposite of the Cartesian three, because they have always shipped a legend and flipping the default would break existing layouts. Set legend={false} before drawing your own, or two legends render side by side.
When drawing a custom legend, use <Dot color={...} />, not <Dot style={{ color }} />. Dot uses a background color, so the latter silently leaves it gray; see Dot pitfalls.

Stat · Statistic · Meter · Timeline · NumberTicker · WorldMap

Playground

Chart Type

<AreaChart data={series} series={[{ key: "revenue" }, { key: "orders" }]} xKey="month" />

Usage

Area Chart

data + series + xKey three-piece set; multi-sequence overlay, color progression chart token adaptive light and dark.

tsx

<AreaChart
  data={data}
  series={[{ key: "revenue", label: "Revenue (thousand yuan)" }, { key: "orders", label: "Order" }]}
  xKey="month"
/>

Polyline / Column

The same data can be exchanged for LineChart / BarChart rendering.

tsx

<>
  <LineChart data={data} series={series} xKey="month" />
  <BarChart data={data} series={series} xKey="month" />
</>

Legend

Revenue (thousand yuan)Order

tsx

<AreaChart data={data} series={series} xKey="month" legend />

Stacking

stacked enables multi-sequence stacking (Area/Bar takes effect).

tsx

<BarChart data={data} series={series} xKey="month" stacked />

Horizontal columnar (CJK category adaptive axis width)

tsx

<BarChart
  horizontal
  data={[
    { stage: "Audio Decoding", p50: 105 },
    { stage: "ASR identification", p50: 620 },
    { stage: "The first sentence of LLM", p50: 890 },
    { stage: "TTS first tone", p50: 760 },
  ]}
  xKey="stage"
  series={[{ key: "p50", label: "P50 Time-consuming (ms)" }]}
/>

Pie Chart/Donut

Flat {name,value} data; donut center hollowed.

SearchDirectSocial MediaRecommended

tsx

<>
  <PieChart data={[{ name: "Search", value: 420 }, { name: "Direct", value: 280 }]} />
  <PieChart donut data={[{ name: "Search", value: 420 }, { name: "Direct", value: 280 }]} />
</>

Radar chart

Comparison of multi-dimensional capabilities, xKey is the dimension field, multi-sequence superposition.

CurrentBenchmark

tsx

<RadarChart
  data={radarData}
  series={[{ key: "Current" }, { key: "Benchmark" }]}
  xKey="dim"
/>

Props

AreaChart / BarChart / LineChart / RadarChart (Cartesian)

Name	Type	Default	Description
data*	`TDatum[]`	—	Row data.
series*	`ChartSeries[]`	—	`{ key, label?, color? }`; colors default by index to chart tokens.
xKey*	`string`	—	Horizontal-axis field.
height	`number`	`280`	Explicit SSR-safe height.
stacked	`boolean`	`false`	Stacks AreaChart or BarChart series.
legend	`boolean \| "top" \| "bottom"`	`false` (`true` for RadarChart)	Series legend with a color dot and `label`. `true` is equivalent to `"bottom"`; `false` turns it off. Dot colors come from the same source as the series through Dot's `color` prop. The default splits by chart family: the Cartesian three default to off, while RadarChart defaults to on because it has always shipped a legend.
legendScroll	`boolean`	`false`	Keeps the legend on a single horizontally scrollable row (matching echarts' `legend.type: "scroll"`). The default wraps and centers, which stacks into several rows and squeezes the canvas once there are many series. Enable it beyond ~8 series.
horizontal	`boolean`	`false`	BarChart-only horizontal orientation.
yAxisWidth	`number`	Adaptive	BarChart-only category-axis width; horizontal mode estimates 48-160 px through `categoryAxisWidth`.
className	`string`	—	Custom class, commonly used for width.

PieChart / RadialChart (flat data)

Name	Type	Default	Description
data*	`ChartDatum[]`	—	Flat `{ name, value, color? }` data.
donut	`boolean`	`false`	Creates a center hole in PieChart.
height	`number`	`280`	Chart height.
legend	`boolean \| "top" \| "bottom"`	`true`	Legend built from `data[].name`, same semantics as above but on by default because these two have always shipped a legend. Pass `false` to turn it off — required before drawing your own, otherwise two legends render side by side.
legendScroll	`boolean`	`false`	Same as above: keeps the legend on a single horizontally scrollable row.
className	`string`	—	Custom class name.

Pitfalls

Width comes from the parent or className, but height must be nonzero; the default is 280.

ResponsiveContainer may measure zero inside shrinking flex layouts. Give the container explicit width; see [[recharts-responsive-container-needs-explicit-width-in-shrink-flex]].

Headless screenshots can starve the entrance-animation clip path and show only axes. Enable reduced motion before capture; see [[recharts-headless-screenshot-blank-clippath-animation-starved]].

Adaptive horizontal category width caps at 160 px. Shorten very long labels or pass yAxisWidth explicitly.

height remains the component's total height when legend is enabled. The legend consumes a row and reduces the canvas height rather than increasing the total height. Once there are enough series to wrap, the legend stacks into several rows and keeps eating the canvas — do not try to absorb that by raising `height` (a 28-series legend is five rows; restoring a readable radar would mean doubling the total height). Enable legendScroll to keep the legend on one scrollable row.

For the polar three (Pie/Radar/Radial), legend defaults to `true`, the opposite of the Cartesian three, because they have always shipped a legend and flipping the default would break existing layouts. Set legend={false} before drawing your own, or two legends render side by side.

When drawing a custom legend, use <Dot color={...} />, not <Dot style={{ color }} />. Dot uses a background color, so the latter silently leaves it gray; see Dot pitfalls.

Chart

Usage

Area Chart

Polyline / Column

Legend

Stacking

Horizontal columnar (CJK category adaptive axis width)

Pie Chart/Donut

Radar chart

When to use

Import

Props

AreaChart / BarChart / LineChart / RadarChart (Cartesian)

PieChart / RadialChart (flat data)

Pitfalls

Related

Playground

Chart

Usage

Area Chart

Polyline / Column

Legend

Stacking

Horizontal columnar (CJK category adaptive axis width)

Pie Chart/Donut

Radar chart

When to use

Import

Props

AreaChart / BarChart / LineChart / RadarChart (Cartesian)

PieChart / RadialChart (flat data)

Pitfalls

Related

Playground