Chart

Chart

Beautiful data visualizations built on Apache ECharts. Declarative, theme-aware, and composable.

NeoUI Charts provide 8 chart types through a Recharts-inspired declarative API rendered via Apache ECharts SVG. Charts automatically pick up your theme's CSS variables — including dark mode — with no extra configuration required.

Area Chart

Smooth area charts with optional stacking and gradients

Bar Chart

Vertical and horizontal bar charts with grouping and stacking

Line Chart

Line charts with multiple series and configurable curves

Pie Chart

Pie and donut charts with labels and legends

Scatter Chart

Scatter plots for correlation and distribution data

Radar Chart

Spider/radar charts for multi-dimensional data comparison

Composed Chart

Combine multiple chart types in a single visualization

Component Model

Charts use a four-layer declarative composition. You pick only the layers you need.

Chart Root — BarChart, LineChart, AreaChart, PieChart, ScatterChart, RadarChart, RadialBarChart, ComposedChart

Primitives — Grid, XAxis, YAxis, ChartTooltip, Legend, RadarGrid, PolarGrid, CenterLabel

Series — Bar, Line, Area, Pie, Scatter, Radar, RadialBar

Fill / Paint — Fill, LinearGradient, Stop

Charts are not wrapped — you write Recharts-style Razor markup directly. When a new feature is needed, add the relevant primitive rather than waiting for a wrapper parameter.

Your First Chart

1. Define your data

Data can be any IEnumerable<T>. Use the DataKey parameter on series components to map properties.

// Define a typed record (or class) for your data
private record ChartPoint(string month, int desktop, int mobile);

private static readonly List<ChartPoint> chartData =
[
    new("Jan", 186, 80),
    new("Feb", 305, 200),
    new("Mar", 237, 120),
    new("Apr", 273, 190),
    new("May", 209, 130),
    new("Jun", 214, 140),
];

2. Build your chart

Wrap a ChartContainer around your chart root and pass Data. Setting a Height is required for responsive sizing.

3. Add a grid

Add <Grid> inside the chart root. Use Vertical="false" for horizontal-only lines, matching the shadcn/ui chart style.

4. Add an axis

Add <XAxis DataKey="month"> to label the category axis. Nest <AxisLabel> to style the tick labels independently.

5. Add a tooltip

Add <ChartTooltip> to show values on hover. Hover over the chart below to see it in action.

6. Add a legend

Add <Legend> to identify series. Labels come from the Name parameter on each series component. Your first chart is complete!

Theming

Charts read color tokens directly from your CSS theme. Dark mode and theme switching work automatically.

Use Color="var(--chart-N)" on any series component. Five semantic chart tokens are predefined in the component library's base theme and adapt to light/dark mode.

var(--chart-1)

var(--chart-2)

var(--chart-3)

var(--chart-4)

var(--chart-5)

@* Use CSS variable tokens for automatic theme / dark-mode support *@
<Bar DataKey="desktop" Color="var(--chart-1)" />
<Bar DataKey="mobile"  Color="var(--chart-2)" />
<Bar DataKey="tablet"  Color="var(--chart-3)" />

@* Or any explicit CSS color value *@
<Line DataKey="revenue" Color="#2563eb" />
<Line DataKey="costs"   Color="hsl(0 72% 51%)" />

You can also pass any valid CSS color directly: Color="#2563eb", Color="hsl(220 98% 61%)", or Color="oklch(0.65 0.22 41)".

Tooltip

supports several display modes and an optional JavaScript formatter function.

Prop	Type	Default	Description
Show	bool	true	Whether the tooltip is enabled.
Mode	TooltipMode	Item	Trigger mode: `Item` (hover series) or `Axis` (hover axis line).
Cursor	TooltipCursor	Default	Cursor indicator style: Default, Line, Cross, Shadow, or None.
Formatter	string?	null	Optional JavaScript function string for custom tooltip content.
Class	string?	null	Additional CSS classes on the tooltip container.

Legend

renders series labels below the chart. Colors are sourced automatically from each series.

Prop	Type	Default	Description
Show	bool	true	Whether the legend is rendered.
TextColor	string?	null	CSS color for legend label text. Recommended: `var(--foreground)`.
Align	LegendAlign	Center	Horizontal alignment: Left, Center, Right.
VerticalAlign	LegendVerticalAlign	Bottom	Vertical position: Top, Middle, Bottom.
Class	string?	null	Additional CSS classes.

ChartContainer

Required wrapper around every chart root. Sets height and provides responsive sizing.

Prop	Type	Default	Description
Height	int	300	Fixed pixel height of the chart area.
Class	string?	null	Additional CSS classes merged onto the container div.
ChildContent	RenderFragment	—	The chart root component (e.g. BarChart, LineChart).

Next Area Chart