A live visual catalogue of every chart type and feature — all rendered as self-contained SVG.
Single-series animated line chart with monthly visitors data.
Three lines (Revenue, Cost, Profit).
Filled area chart showing daily active users over 10 days.
Single-series column chart — product sales by category.
Two column series side-by-side for Budget vs Actual spend.
Pie chart with legend showing market share by vendor.
Smooth spline curves — temperature trends for three cities.
Area series (Volume) combined with a Line series (Price).
SvgMode.Static — no CSS hover rules, no embedded JS.
SvgMode.Interactive — CSS hover tooltips + embedded JS.
Catmull-Rom cubic Bézier curves.
ChartType.Bar — bars grow left-to-right.
ChartType.Scatter — dots only, no connecting line.
Bars grow from baseline on load via SMIL.
ChartTheme.Dark — navy background, light text.
ChartTheme.Pastel — soft off-white background.
ShowDataLabels — values rendered on bars and line points.
Pie chart with DonutHolePercent = 0.55 creating a donut hole.
Stacking.Normal — bars are stacked so totals are visible.
Stacking.Percent — each column normalised to 100 %.
Stacking.Normal on Area series.
WithYAxis2() — columns on left axis, line on right axis.
YAxis.PlotBands and YAxis.PlotLines.
ChartType.Waterfall — incremental running-total chart.
ChartType.Gauge — semi-circular dial.
Axis.LabelRotation = -45 — diagonal labels.
DataLabel: FontSize · Format — three distinct styles on one chart.
DataLabelRadius: inside, at edge, and outside with connector.
LegendBuilder: Vertical() · AlignRight() · SymbolRadius.
LegendBuilder: AtTop() · AlignCenter() · Horizontal() · Padding.
LegendBuilder: AtBottom() · AlignLeft() · SymbolSize · Offset.
Series.BorderWidth · BorderRadius per column series.
Series.BorderWidth on scatter dot markers.
Series.FillOpacity: 0.15 · 0.40 · 0.70 — three overlapping area series.
TooltipBuilder: FontSize · Padding · Format · TransitionDuration.
TooltipBuilder: HideArrow() · custom Format template.
DonutCenter: auto total · title caption · font size.
Donut chart with USD data labels and DonutCenter total.
ChartType.DataRing — full 360° progress ring.
Three DataRing charts side-by-side as a KPI dashboard.
Size · AsInteractive · Animate · StackNormal · YAxisFormat · ShowDataLabels · SeriesBuilder.
Width(600) — pins the SVG to exactly 600 px wide.
ResponsiveWidth() — SVG fills its container.
XAxisTickInterval — numeric X-axis with explicit tick spacing.
Fork() — produce a Static and an Animated variant.
AddBubble() — scatter with a third dimension (Z).
AddHeatmap() — colour-coded matrix.
AddColumnRange() — each category spans from low to high.
AddAreaRange() — filled band between a lower and upper line.
AddFunnel() — stacked trapezoid stages.
AddTreemap() — nested rectangles sized proportionally.
OnPointClick() — click any data point to see its details.
OnPointClick() — two column series; click any bar.
OnPointClick() combined with shared tooltip.
SvgMode.Interactive — click any legend item to hide/show that series.
ShowExportButton() — download button appears top-right.
ShowExportMenu() — SVG, PNG, JPEG, and PDF options.
AnomalyBands · TrendLine · MovingAverage · HighlightPeaks · NarrativeSummary.
AutoInsight on an Area series — pure SVG, no JavaScript.
AddParliament() — semicircular hemicycle seating diagram.
YAxisLogarithmic() — base-10 log scale.
XAxisDateTime() — auto-formatted by span.
AddRadar() — closed polygon, great for multivariate comparisons.
AddBoxPlot() — five-number summary per category.
AddErrorBar() — I-beam uncertainty whiskers.
LinearGradientFill() — vertical gradient via SVG <linearGradient>.
PatternFill() — diagonal lines, dots, grid via SVG <pattern>.
MarkerSymbol() — circle, square, diamond, and triangle.
Zones() — recolour a line by value band.
AddCandlestick() — OHLC bodies with wicks.
AddOhlc() — high-low bar with open/close ticks.
Annotations() — labels, lines, rectangles and circles.
ChartTheme.Vivid — full-spectrum palette.
LabelLayout() — rotation, wrap, stagger, font scaling, collision detection.
ChartTheme.HighContrast — WCAG AA palette, all colours ≥ 4.5:1 on white.
NullGap() — Break (gap), Connect (bridge), Zero (baseline) for missing values.
TargetLine() — horizontal reference lines scoped to a single series.
Embeds the chart as a Base64 data: URI inside an HTML img tag.
StackPercent() — Y-axis automatically labels 0% … 100%.
Column (primary Y) + Line (secondary Y) on one chart.
Column + Line + Area series rendered together.
YAxisInverted() — minimum at the top, ranking style.
AddLinearRegression() — least-squares trend line over raw data.
AddMovingAverage() — simple 3-period moving average over a line series.
AddExponentialSmoothing() — EMA overlay (α = 0.4) for noisy data.
ShowDataTable() — appends a per-category value grid below the chart.
AriaLabel() + AriaDescription() — custom accessible title and description.
Culture("de-DE") — number formatting uses comma decimal separator.
RightToLeft() — dir="rtl" on SVG root, direction:rtl CSS on all text.
ChartTemplate.Revenue — column chart with N0-formatted Y-axis.
ChartTemplate.KpiDashboard — dark theme, interactive, no grid/legend.
ChartTemplate.TimeSeries — spline, animated, 1 s entry.
ChartTemplate.ExecutiveSummary — pastel bar chart, static/PDF-safe.
ChartOptions.ToJson() / ChartBuilder.FromJson() — persist and restore a chart.
AddDumbbell() — two dots per category connected by a vertical line.
AddStream() — stacked areas with a centered wiggle baseline.
AddGantt() — horizontal task bars on a numeric time axis.
AddSankey() — node-link flow diagram with cubic-bezier links.
RangeSelector() — interactive brush strip below the chart fires tf:rangechange.
SyncGroup() — two charts share the same hover group so tooltips mirror each other.
WithDrilldown() — click a column to open a child detail chart; Back returns to overview.
GridLines(false) / HideGridLines() — show or hide the background plot grid.
