Components / Chart

Chart

Bar, line, area, pie, donut, radar, radial bar, and scatter charts drawn as hand-rolled SVG: no recharts, no charting runtime, zero JS dependencies. A ZitsChartContainer takes a ChartConfig, injects a --color-<key> CSS var per series, and cascades it to the legend and the on-hover tooltip.

Examples

The real component running in WebAssembly. Flip Bar / Line / Area to swap chart types over one shared 2-series config, and hover a month to raise the floating tooltip. Scales, grid, axis ticks, and SVG paths are all computed in C#.

Visitors

Desktop vs. mobile · Jan–Jun 2026

Jan

Feb

Mar

Apr

May

Jun

Desktop

Mobile

razor

@* 1 · Describe each series: a label + a theme colour token. *@
@code {
    ChartConfig config = new()
    {
        ["desktop"] = new ChartSeries("Desktop", "var(--chart-1)"),
        ["mobile"]  = new ChartSeries("Mobile",  "var(--chart-2)"),
    };

    List<ChartDataPoint> data = new()
    {
        new("Jan", ("desktop", 186), ("mobile", 80)),
        new("Feb", ("desktop", 305), ("mobile", 200)),
        new("Mar", ("desktop", 237), ("mobile", 120)),
    };
}

@* 2 · Wrap any chart in the container; it injects --color-desktop /
       --color-mobile and cascades the config to the legend + tooltip. *@
<ZitsChartContainer Config="config" class="h-[300px] flex-col">
    <div class="min-h-0 flex-1">
        <ZitsBarChart Data="data" />   @* or ZitsLineChart / ZitsAreaChart *@
    </div>
    <ZitsChartLegend />
</ZitsChartContainer>

Chart types

Three plot components share the same Data shape and config; pick the one that fits. Each fills its ZitsChartContainer and colours itself from the cascaded tokens.

ZitsBarChart

Jan

Feb

Mar

Apr

May

Jun

ZitsLineChart

Jan

Feb

Mar

Apr

May

Jun

ZitsAreaChart

Jan

Feb

Mar

Apr

May

Jun

razor

<ZitsChartContainer Config="config" class="h-[150px]">
    <ZitsBarChart Data="data" />
</ZitsChartContainer>

<ZitsChartContainer Config="config" class="h-[150px]">
    <ZitsLineChart Data="data" />
</ZitsChartContainer>

<ZitsChartContainer Config="config" class="h-[150px]">
    <ZitsAreaChart Data="data" />
</ZitsChartContainer>

More types

Four more plots, all hand-rolled SVG over the same ChartConfig and cascaded --color-<key> tokens. Pie and donut and radial bar take one value per row (the row Label is the config key that colours it); radar takes a value per series across category rows; scatter positions each row by its XKey / YKey.

ZitsPieChart

ZitsPieChart (donut)

ZitsRadarChart

Jan

Feb

Mar

Apr

May

Jun

ZitsRadialBarChart

ZitsScatterChart

razor

@* Pie / donut / radial bar: one value per row, row Label = config key. *@
<ZitsChartContainer Config="config" class="h-[200px]">
    <ZitsPieChart Data="data" InnerRadius="24" />   @* InnerRadius > 0 = donut *@
</ZitsChartContainer>

@* Radar: a value per series across the category rows. *@
<ZitsChartContainer Config="config" class="h-[200px]">
    <ZitsRadarChart Data="data" />
</ZitsChartContainer>

@* Scatter: XKey / YKey position each point; row Label is the series colour. *@
<ZitsChartContainer Config="config" class="h-[200px]">
    <ZitsScatterChart Data="data" XKey="x" YKey="y" />
</ZitsChartContainer>

Distinctive params (each plot also takes Data and ShowTooltip):

Prop	Type	Default
ZitsPieChart InnerRadius	double	0 (>0 = donut)
ZitsPieChart OuterRadius / PaddingAngle	double	42 / 0
ZitsRadarChart FillArea / FillOpacity	bool / double	true / 0.2
ZitsRadialBarChart StartAngle / EndAngle	double	0 / 360
ZitsRadialBarChart CornerRadius	double	0
ZitsScatterChart XKey / YKey / ZKey	string	"x" / "y" / null
ZitsScatterChart Shape	string	"circle"

Config & anatomy

A ChartConfig is a key → { Label, Color } map. The colour is any CSS expression, usually one of the five theme tokens var(--chart-1) … var(--chart-5). The container stamps each as a scoped --color-<key> var, so the plot, legend, and tooltip all stay in sync.

Chart.razor razor

ChartConfig config = new()
{
    ["desktop"] = new ChartSeries("Desktop", "var(--chart-1)"),
    ["mobile"]  = new ChartSeries("Mobile",  "var(--chart-2)"),
    // Up to five tokens ship with the theme: var(--chart-1) … var(--chart-5).
    // Color is any CSS expression: a token, an hsl(...), or a hex.
};

The legend and tooltip read the cascaded config, so both must live inside the container.

text

ZitsChartContainer                       (Config = ChartConfig)
├── ZitsBarChart / ZitsLineChart / ZitsAreaChart   (Data = ChartDataPoint[])
│   └── ZitsChartTooltip → ZitsChartTooltipContent  (raised on hover)
└── ZitsChartLegend → ZitsChartLegendContent

Installation

Terminal bash

navius add chart

API reference

Parts:

Part	Role
ZitsChartContainer	Frame + ChartConfig host; injects the --color-<key> vars and cascades config.
ZitsBarChart	Grouped bars, one fill per series.
ZitsLineChart	Stroked line per series.
ZitsAreaChart	Filled area + top line per series.
ZitsChartLegend	Legend slot; defaults to ZitsChartLegendContent built from config.
ZitsChartTooltip / ...Content	The floating card the plots raise on hover.

ZitsChartContainer:

Prop	Type	Default
Config	ChartConfig?	-
ChildContent	RenderFragment?	-
Attributes	splatted	-

ZitsBarChart · ZitsLineChart · ZitsAreaChart (identical params):

Prop	Type	Default
Data	IEnumerable<ChartDataPoint>?	-
Series	IReadOnlyList<string>?	config keys
ShowTooltip	bool	true
ShowGrid	bool	true
ShowXAxis	bool	true

Config & data types (ZitsChart.cs):

Type	Shape
ChartConfig	Dictionary<string, ChartSeries>; series key → presentation.
ChartSeries	record (string? Label, string? Color) { RenderFragment? Icon }
ChartDataPoint	(string Label, params (string Key, double Value)[]); one row.