Chart

Overview

Chart implements its own scale and layout math in C# (ChartMath, a fixed 0 0 100 100 SVG viewBox stretched with preserveAspectRatio="none" so a unit equals a percent) and renders bars/lines/areas/slices/arcs as plain SVG paths; there is no recharts and no JS charting dependency. ZitsChartContainer takes a ChartConfig (a series key → label/color/icon map), injects a --color-<key> CSS variable per series scoped to a data-chart id, and cascades the config to the legend and tooltip. Seven plot components (ZitsBarChart, ZitsLineChart, ZitsAreaChart, ZitsPieChart, ZitsRadarChart, ZitsRadialBarChart, ZitsScatterChart) share the same Data/config contract.

Install

navius add chart --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsChartContainer Config="config" class="h-[300px] flex-col">
    <div class="min-h-0 flex-1">
        <ZitsBarChart Data="data" />
    </div>
    <ZitsChartLegend />
</ZitsChartContainer>

@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)),
    };
}

Parts and props

Component	Prop	Type	Default	Description
ZitsChartContainer	Config	ChartConfig?	null	Series key → ChartSeries (Label/Color/Icon). Injects a scoped --color-<key> var per entry and cascades the config to descendants.
ZitsBarChart / ZitsLineChart / ZitsAreaChart / ZitsPieChart / ZitsRadarChart / ZitsRadialBarChart / ZitsScatterChart	Data	IEnumerable<ChartDataPoint>?	null	Rows: a category Label (x-axis tick) plus a per-series-key numeric value map.
(same)	Series	IReadOnlyList<string>?	null	Series keys to plot, in order. Defaults to the cascaded ChartConfig’s keys.
(same)	ShowTooltip / ShowGrid / ShowXAxis	bool	true	Toggle the hover tooltip, grid lines, and x-axis label row.
ZitsChartTooltip	Visible, Left, Top	bool, double, double	true, 0, 0	Positions the floating tooltip layer as a percent of the plot box; renders nothing when Visible is false.
ZitsChartTooltipContent	Label, Payload, HideLabel, HideIndicator, Indicator	see source	n/a	Indicator is dot | line | dashed, the swatch shape. Reads the cascaded ChartConfig for each payload item’s label/color/icon, falling back to per-item overrides then the raw key.
ZitsChartLegend	VerticalAlign, HideIcon	string, bool	"bottom", false	Renders ChildContent if given, otherwise a default ZitsChartLegendContent built from the cascaded config.

Styling surface

Attributes on every part is merged with its preset class set via Cn.Merge, caller classes applied last. There is no variant/size parameter; layout is controlled through class (e.g. container height) and the per-series Color in ChartConfig.

Data attribute hooks

Part	Attribute	Description
Container	data-chart="<generated-id>"	Scopes the injected --color-<key> CSS variable block to this container instance, emitted by ZitsChartContainer itself.

Chart is presentational SVG plus C#-computed hover state: category rects and per-slot transparent hit-targets drive @onmouseover/@onmousemove/@onmouseleave to show the floating ZitsChartTooltip. There is no keyboard interaction or ARIA role beyond whatever the caller adds via Attributes.