feat: apex chart restyle — shadcn aesthetic, 3 new chart types, sleek tooltips

[Shewart]

Reworks every chart's chrome to match the shadcn/ui aesthetic and ships three new chart types the roadmap called for.

The chrome rewrite

ChartVariants.GetOptions used to hand ApexCharts a config that looked stock — visible axis borders, ticks, a busy toolbar, bottom legend with square markers, default palette hex colors, and a tooltip that never actually rendered for some chart types (see bugs below).

The new default config:

Element	Before	After
Toolbar	Zoom / pan / download visible	Off by default; opt-in via <Chart ShowToolbar="true">
Axis border + ticks	Visible	Both hidden — cleaner baseline like shadcn
Grid lines	Full grid, solid	Horizontal only, dashed, --border @ 60%
Bar corners	Fully rounded	Top-only (BorderRadiusApplication = End)
Column width	60%	55% — matches shadcn density
Legend	Bottom, square markers	Top-left, circle markers, tighter font
Stroke curve	Default straight	Curve.Smooth
Mount animation	Default	800ms sweep + 150ms per-series AnimateGradually
Palette	Hex hardcoded	Same hex, but re-plumbed through ChartTheme.Default/Colorful/Monochrome selector
Tooltip	ApexCharts default	Custom .shellui-chart-tooltip — title bar + rows, tabular-nums values, compact ~200px max-width, rounded-square markers
Font sizes	12-14px	11px axis labels, 12px legend, 14px title — matches shadcn scale

New chart types

Component	Purpose
RadarChart<TItem>	Multi-axis attribute plot with area fill. Skill/capability comparisons.
DonutChart<TItem>	Pie with a hole — shadcn's most-used chart pattern for category breakdowns.
RadialChart<TItem>	Single-value progress ring with center label + value. Gauge/dashboard pattern.

All three follow the same shape as the existing chart family — inherit Chart<TItem>, take Items / KeySelector / Value / Name / XValue / YValue. Live + demo copies + CLI templates (data-picker-style split) all in sync.

New Chart.razor parameters

• ShowToolbar (default false) — opt in to ApexCharts' download/zoom/pan/reset toolbar. Off by default = shadcn aesthetic.
• ShowLegend (default true) — quick way to hide the legend on single-series charts where it's redundant.

Compact shadcn-style tooltip

Custom tooltip renderer generates .shellui-chart-tooltip markup instead of relying on the ApexCharts default:

• max-width: 220px, no forced min-width — tight around content
• Title bar ("February"), then rows of [10px square marker] [label] [value]
• font-variant-numeric: tabular-nums on values so digits align cleanly
• Matches shadcn's chart tooltip look pixel-for-pixel

Handles both cartesian charts (bar/line/area/multi-series/radar) with a title + multiple series rows and circular charts (pie/donut/radialBar/polarArea) with a single label-value row. Chart-type detection uses a defensive fallback (chart.type name → shape of the series array) so it doesn't rely on ApexCharts reporting chart.type consistently across chart variants.

Bugs found and fixed along the way

1. Pie chart tooltip was silently clobbered on every render.
PieChart.razor had an OnParametersSet override that replaced ChartOptions.Tooltip with a hardcoded config on every parameter change. Nothing anyone changed in ChartVariants had ever affected pie charts — the override wiped it out each render. Removed the tooltip override in PieChart.razor (live + demo + CLI template); kept just the Chart.Type = Pie assignment which is the legit part.

2. Tooltip title showed numeric indices instead of category strings.
w.globals.labels[dataPointIndex] was returning "2", "3", "4" instead of "Feb", "Mar", "Apr". ApexCharts stashes category strings in categoryLabels or w.config.xaxis.categories, and labels sometimes falls back to auto-numbering. Custom function now tries all three sources in order — real string wins.

3. Tooltip drifted to the next column when hovering near boundaries.
Tooltip.FollowCursor = true positioned the tooltip relative to the mouse pointer, which slid it to the neighbor column as the mouse approached the boundary. Flipped to false — tooltip anchors to the data point being reported.

4. Pie chart's built-in slice labels overlapped the tooltip.
PlotOptionsPie.DataLabels.MinAngleToShowLabel = 360 disables the native slice callout labels (their label:value text was what was appearing inside the pie chart as raw white text).

What we tried and rolled back

• Theme-following palette via var(--chart-N) in the color array. SVG resolves CSS vars in fill/stroke attributes just fine, but ApexCharts also draws to canvas contexts (some legend and marker paths) that don't resolve var(), so parts of the chart went uncolored. Bigger issue: the theme's --chart-3/4/5 were pure grayscale, so even where var() did resolve, the palette was 3 grays + 1 blue + 1 yellow — washed out.
• Gradient fill for all chart types. Fill.Type = Gradient with OpacityFrom: 0.4, OpacityTo: 0.05 made every bar and pie slice fade toward transparent — visible outlines but no fill. Reverted to Fill.Type = Solid, Opacity = 0.85.

Both are documented as future paths — theme-following would need runtime JS interop to compute var values, and per-chart-type gradient overrides would go on AreaChart.razor specifically.

Files

File	Kind
src/ShellUI.Components/Components/RadarChart.razor (new)	Live component
src/ShellUI.Components/Components/DonutChart.razor (new)	Live component
src/ShellUI.Components/Components/RadialChart.razor (new)	Live component
src/ShellUI.Components/Variants/ChartVariants.cs	Full config rewrite + new showLegend param
src/ShellUI.Components/Components/Chart.razor	ShowToolbar + ShowLegend parameters
src/ShellUI.Components/Components/PieChart.razor	Removed OnParametersSet tooltip override
src/ShellUI.Components/wwwroot/shellui-theme.css	New chart chrome CSS block (~150 lines)
src/ShellUI.Templates/Templates/ChartVariantsTemplate.cs	Full rewrite to match live
src/ShellUI.Templates/Templates/ChartStylesTemplate.cs	Rewritten CSS with .shellui-chart-tooltip
src/ShellUI.Templates/Templates/PieChartTemplate.cs	Removed tooltip override
NET10/BlazorInteractiveServer/Components/UI/{DonutChart,RadarChart,RadialChart}.razor (new)	Demo Path-C copies
NET10/BlazorInteractiveServer/Components/UI/{Chart,PieChart}.razor	Same changes as live
NET10/BlazorInteractiveServer/Components/UI/Variants/ChartVariants.cs	Full config rewrite (mirror of live)
NET10/BlazorInteractiveServer/Components/Demo/ChartsDemo.razor	Added Donut / Radar / Radial sections with sample data
NET10/BlazorInteractiveServer/wwwroot/input.css	Chart CSS block replaced with compact tooltip + subtle chrome
NET10/BlazorInteractiveServer/wwwroot/app.css	Regenerated by Tailwind CLI
src/ShellUI.Components/wwwroot/shellui-classes.txt + build/*.targets	Regenerated safelist (367 → 370 classes)
ShellUI.Tests/ChartStylesTests.cs	Updated assertions to check for new .shellui-chart-tooltip* class names

Test plan

• dotnet test — 80/80 green (safelist drift check auto-updated, chart-styles test updated for new class names)
• Home page ChartsDemo section — Bar, Line, Area, Pie, Multi-Series, Donut, Radar, Radial all render with vibrant palette and mount-animate on load
• Hover any chart — compact shellui tooltip with correct x-axis label as title ("Feb", "Mar", "Apr"), tabular-numeric values, square markers
• Hover pie — single-row tooltip with the sliced category label + value
• Multi-series bar — tooltip title matches the hovered column, no drift to neighbor
• Toggle light ↔ dark — all chart chrome (grid, axis, tooltip, legend) follows theme via CSS vars
• <Chart ShowToolbar="true"> — zoom/pan/download appears; default renders clean
• <Chart ShowLegend="false"> — legend hides on single-series charts

Follow-ups (not blocking)

• Theme-following palette — requires runtime JS to compute --chart-N values, or a build-time CSS-var → hex resolver. Real feature-flag path if we later ship a "chart config" API à la shadcn's ChartConfig.
• Per-chart-type gradient overrides — AreaChart should get a fill gradient (top color → transparent at zero-line) via its own OnParametersSet while Bar/Pie stay solid. Small follow-up.
• shadcn-composition wrapper — the bigger feat/chart-composition branch that layers <ChartContainer> + <ChartConfig> + <ChartTooltip> primitives on top of ApexCharts for the compositional shadcn API pattern.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.