BLS.Charts 0.1.3

BLS.Charts Lightweight, dependency-free Blazor (Razor Class Library) charting components built with semantic SVG. Drop them into any Blazor app—no JavaScript, no external CSS.

V 0.1.2

• Can now use the same label name at PieChart for multiple numbers

V 0.1.1

• Update StyleSheet bug fixes
• Update InvariantCulture for formatting

FEATURES

• Native Blazor components (WASM/Server) — pure C# + SVG
• No JS/CSS dependencies — styles are injected by the components
• Accessibility-friendly — role="img", aria title/description
• Animations — scale-in and draw animations with easing
• Label formatting — numeric/percent formats everywhere
• Palettes & theming — per-series colors or auto palettes
• Events — click/hover callbacks with strongly typed payloads

INSTALL dotnet add package BLS.Charts

Namespace: BLS.Charts.ChartComponents

In your app’s _Imports.razor (or use fully-qualified names): @using BLS.Charts.ChartComponents

COMPONENTS (overview; full XML docs are included in IntelliSense)

PieChart / Donut Data (IEnumerable<PieItem>), IsDonut, DonutThickness, StartAngle Labels: ShowLabels, ShowPercent, LabelMinPercent, LabelRadiusOffset Center: CenterLabel Legend: ShowLegend, LegendColumns, LegendPlacement Groups ring (optional): ShowOuterGroups, OuterGroupThickness, OuterGroupGap, OuterGroupPalette, OuterGroupLabelPlacement (Inside/Outside), OuterGroupShowPercent Accessibility: AriaTitle, AriaDescription Animation: Animate, AnimateDraw, DrawDurationMs, DrawEasing Events: OnSliceClick, OnSliceHover Theming: Palette

BarChart (vertical) Data (IEnumerable<BarItem>) Layout: Width, Height, Padding*, BarGap, RoundedBars, BarRadius Scaling: MaxValue, UseNiceAxis, YAsPercent, PercentBase ("max" | "total") Axes/labels: ShowAxes, ShowGrid, GridLines, ShowYAxisLabels, YLabelFormat Values: ShowValues, ValueFormat, PercentFormat Interactivity: OnBarClick, OnBarHover, EnableSelection, UseDropShadow, HoverLift Animation, Accessibility, Palette as above

HorizontalBarChart Same API as BarChart but horizontal Scaling/formatting uses XAsPercent, XLabelFormat

GroupedBarChart Data: Categories (IReadOnlyList<string>), Series (IReadOnlyList<BarSeries>) Spacing: CategoryGap, IntraGroupGap, RoundedBars, BarRadius Scaling: MaxValue, UseNiceAxis, YAsPercent, PercentBase ("max" | "category") Legend: ShowLegend Events: OnBarClick, OnBarHover (payload: (Category, Series, Value))

LineChart Data: Categories, Series (IReadOnlyList<LineSeries>) Axes/labels: ShowAxes, ShowGrid, GridLines, YLabelFormat, ShowCategoryLabels Values/markers: ShowValues, ValueFormat, PercentFormat, ShowMarkers, MarkerSize Lines/area: StrokeWidth, ShowArea, AreaOpacity Scaling: MaxValue, UseNiceAxis, YAsPercent, PercentBase ("max" | "sum") Legend: ShowLegend Hover/tooltip: ShowHover, CrosshairColor, TooltipBg, TooltipBorder, TooltipText, HoverMarkerSize Curves: Smooth, SmoothTension Animation: AnimateDraw, DrawDurationMs, DrawEasing

StackedAreaChart Data: Categories, Series (reuses LineSeries) Style: StrokeWidth, AreaOpacity, ShowMarkers, MarkerSize Scaling: YAsPercent (100% stacked) or absolute with MaxValue/UseNiceAxis Hover/tooltip, Curves, Animation — same pattern as LineChart

GuageChart (Gauge / Arc) Value ring or needle: Value, Min, Max, ValueAsStroke Angles/size: StartAngle, EndAngle, Size, Thickness, CanvasPadding, OffsetY Ticks/labels: ShowTicks, MajorTickCount, MinorTicksPerMajor, ShowTickLabels, TickLabelFormat Center text: Unit, ValueFormat, Caption Caps/overlap: RoundedCaps, RoundedValueCap, RoundedValueStartCap, RoundedRangeCaps, OverlapRanges, RangesTouch, RangeGapDeg, OverlapFeatherDeg, SubpixelNudgeDeg Colors: TrackColor, ValueColor, ValueTextColor, CaptionColor, NeedleColor, TickColor, TickLabelColor Ranges: Ranges (List<GaugeRange> { From, To, Color }) Accessibility + Animation (AnimateDurationMs, Easing)

RadialProgressChart Value, optional BufferValue/ShowBuffer ValueColor, TrackColor, UseGradient (start/end), FillStartCap Threshold Ranges with rounded caps and touch options LabelFormat for center text

BulletChart Value (+ optional SecondaryValue), Comparatives (targets) Length, Thickness, TrackRoundedEnds, MeasureRoundedEnds Optional qualitative Ranges with gaps/touch and rounded caps Horizontal or vertical orientation

ProgressBar Determinate: Value/Min/Max; Indeterminate: Indeterminate = true Orientation: Orientation (H/V), Reverse Label: ShowLabel, LabelPosition (Inside/Outside/Auto), LabelFormat, AriaLabel Visuals: TrackColor, FillColor, BufferColor, ShowBuffer, BufferValue Ranges: Ranges (List<BarRange>), RangesTouch, RoundedRangeCaps, TrackRoundedEnds, FillRoundedEnds Stripes/animation: Striped, StripeAnimated, AnimateDurationMs

THEMING & PALETTES Every chart accepts a Palette (string[] of CSS colors). For multi-series charts, you can also set Color on each series/item to override the palette.

Example: <PieChart Data="@data" Palette="new[]{ "#0ea5e9", "#22c55e", "#f59e0b" }" />

FORMATTING Where you see *Format properties (ValueFormat, PercentFormat, YLabelFormat, TickLabelFormat…), provide standard .NET format strings:

Numbers: "0", "0.##", "N0" Percent: "0'%'"

For percentage axes in charts with YAsPercent=true, use the corresponding PercentFormat property.

EVENTS Bar charts: OnBarClick, OnBarHover Grouped bars: payload (Category, Series, Value) Pie: OnSliceClick, OnSliceHover Use these for selections, tooltips, or navigation.

ACCESSIBILITY All SVGs render with role="img", a <title> (from AriaTitle), and optional <desc> (AriaDescription). Provide meaningful titles/descriptions for screen readers.

TARGET FRAMEWORK

.NET 8 (net8.0)

Works in Blazor WebAssembly and Blazor Server

ROADMAP

Stacked bars & 100% stacked bars Time-series axis helpers Export helpers (PNG/SVG)