Tesserae - Charts

Charts

Four dependency-free SVG chart types: LineChart, BarChart, AreaChart, and PieChart. All four share a common base that handles the responsive SVG surface, the series/palette model, observable-driven re-rendering, tippy tooltips, and the role="img" accessibility summary. Rendering style mirrors [[Sparkline]].

Each chart fills its container via a ResizeObserver and re-paints on every size change. Data can be supplied as plain double[] arrays or as observables that push updates; subscriptions are released automatically when the component leaves the DOM.

Chart types

Type	Factory	Use for
`LineChart`	`UI.LineChart()`	Trends over ordered categories; fits data range (no forced zero baseline)
`BarChart`	`UI.BarChart()`	Category comparisons; grouped bars; always reads against a zero baseline
`AreaChart`	`UI.AreaChart()`	Filled trend regions with a gradient under the line; zero baseline
`PieChart`	`UI.PieChart()`	Part-to-whole; can render as a donut via `.Donut()`

Common API (all chart types)

All charts expose the methods below through ChartBase<T> and, for the cartesian types, CartesianChartBase<T>.

Data and series

.Data(double[] values) — single unnamed series.
.Series(params ChartSeries[] series) — replace all series at once.
.Series(string name, double[] values, string color = null) — append one named series.
.Series(IObservable<double[]> values, string name = null, string color = null) — bind a single series to an observable.
.Series(IObservable<ChartSeries[]> series) — bind all series to an observable.

Appearance

.Colors(params string[] palette) — replace the default eight-color theme palette. Colors are CSS values; the default palette uses Theme.Colors.* variables that adapt to light/dark mode.
.Tooltips(bool show = true) — enable or disable tippy popovers on each data point/bar/slice. Native <title> elements are always written regardless of this flag.
.Legend(bool show = true) — show a swatch + label legend.
.Title(string title) — set an explicit aria-label on the chart container; used as the accessibility summary instead of the auto-generated description.
.FormatValues(Func<double, string> formatter) — override how values are displayed in tooltips and axis labels. Default: "0.##".

Cartesian charts only (LineChart, BarChart, AreaChart)

.XAxis(params string[] categories) — category labels along the X axis.
.XAxisTitle(string title) — X axis title, shown below the category labels.
.YAxisTitle(string title) — Y axis title.
.Grid(bool show = true) — horizontal gridlines (default: on).
.Axes(bool show = true) — axis lines and value/category labels (default: on).

LineChart and AreaChart

.Points(bool show = true) — show or hide the per-point circle markers (default: on).

BarChart

.Rounded(double radius = 2) — corner radius on each bar rectangle.

PieChart

.Labels(params string[] labels) — per-slice labels, used in the legend and tooltips.
.Donut(double holeRatio = 0.6) — render as a donut with a cutout sized as a fraction (0–0.95) of the radius.

ChartSeries

ChartSeries carries one named data series:

new ChartSeries(string name, double[] values, string color = null)

name — display name shown in the legend and tooltips. Pass null for an unnamed series.
values — one value per category/point.
color — explicit CSS color; when null the chart assigns a palette color by index.

Usage examples

Line chart with two series and category labels

charts-line-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var chart = LineChart()
                .Series("Revenue",  new double[] { 12, 18, 15, 22, 30, 28, 35 })
                .Series("Target",   new double[] { 15, 15, 20, 20, 25, 25, 30 })
                .XAxis("Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun")
                .Legend()
                .WS().H(200.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(chart);
        }
    }
}

Bar chart with grouped series

charts-bar-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var chart = BarChart()
                .Series("Q1", new double[] { 40, 55, 30, 70 })
                .Series("Q2", new double[] { 50, 45, 60, 65 })
                .XAxis("North", "South", "East", "West")
                .Legend()
                .Rounded(3)
                .WS().H(220.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(chart);
        }
    }
}

Area chart with observable data

charts-area-observable-sample.cs

using System;
using System.Linq;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var rng  = new Random();
            var data = SettableObservable.Of(Enumerable.Range(0, 10).Select(_ => rng.NextDouble() * 100).ToArray());

            var chart = AreaChart()
                .Series(data, name: "Requests")
                .XAxis("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct")
                .Legend()
                .WS().H(200.px());

            var button = Button("Refresh").Primary().OnClick((s, e) =>
                data.Value = Enumerable.Range(0, 10).Select(_ => rng.NextDouble() * 100).ToArray());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(VStack().Children(chart, button.MT(12)).Padding(16.px()));
        }
    }
}

Pie chart and donut chart

charts-pie-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var pie = PieChart()
                .Data(new double[] { 40, 25, 20, 15 })
                .Labels("Search", "Direct", "Referral", "Social")
                .Legend()
                .W(220.px()).H(180.px());

            var donut = PieChart()
                .Data(new double[] { 60, 25, 15 })
                .Labels("Active", "Idle", "Offline")
                .Donut(0.55)
                .Legend()
                .W(220.px()).H(180.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(HStack().Children(pie, donut).Gap(24.px()).Padding(16.px()));
        }
    }
}

API reference

class

ChartSeries

public sealed class ChartSeries

A single named data series for a chart, with an optional explicit color (falling back to the chart palette).

Namespace: Tesserae

Constructors

Name	Description
ChartSeries	Initializes a new instance of the `ChartSeries` class.

Constructor

ChartSeries

public ChartSeries(string name, double[] values, string color = null)

Initializes a new instance of the ChartSeries class.

Properties

Name	Description
Name	The series display name, used in the legend, tooltips and accessibility summary.
Values	The series values, one per category/point.
Color	An optional explicit CSS color; when null the chart assigns a palette color by index.

Property

ChartSeries.Name

public string Name { get; set; }

The series display name, used in the legend, tooltips and accessibility summary.

Property

ChartSeries.Values

public double[] Values { get; set; }

The series values, one per category/point.

Property

ChartSeries.Color

public string Color { get; set; }

An optional explicit CSS color; when null the chart assigns a palette color by index.

class

ChartBase<T>

public abstract class ChartBase<T> : IComponent where T : ChartBase<T>

Shared base for Tesserae's lightweight, dependency-free SVG charts. Handles the responsive SVG surface (sized 1:1 to its container via a ResizeObserver), the series/palette model, observable-driven re-rendering, theme colors, tooltips (reusing tippy) and the role="img" accessibility summary. Mirrors Sparkline's SVG rendering style.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
ChartBase	Initializes a new instance of the `ChartBase{T}` class.

Constructor

ChartBase

protected ChartBase(double minWidth = 120, double minHeight = 80)

Initializes a new instance of the ChartBase{T} class.

Methods

Name	Description
Data	Replaces the chart's series with a single unnamed series of plain values.
Series	Replaces the chart's series.
Colors	Sets the series color palette (used for series without an explicit color).
Tooltips	Enables or disables per-element tooltips.
Legend	Enables or disables the legend.
Title	Sets an accessibility caption / summary for the chart.
FormatValues	Sets the formatter used for values in tooltips and labels.
ColorFor	Returns the color for the series at the given index (explicit color or palette by index).
El	Creates an SVG element in the SVG namespace.
Attr	Sets an attribute on an SVG element (double values are invariant-formatted).
AttachPointTooltip	Attaches a hover tooltip to an SVG element: a native <title> child (for accessibility / no-JS fallback) and, when enabled, a tippy popover reusing the bundled tippy.js.
ClearSvg	Removes every child of the SVG surface.
QueueRender	Schedules a render on the next animation frame, coalescing bursts of changes.
RenderChart	Draws the chart into the SVG surface at the given pixel dimensions.
BuildAriaLabel	Builds the accessibility summary describing the chart's data.
RenderLegend	Renders the legend swatches into the supplied container element, returning its height.
Render	Renders the component's root HTML element.

Method

ChartBase.Data

public T Data(double[] values)

Replaces the chart's series with a single unnamed series of plain values.

Method

ChartBase.Series

Overload
Series(ChartSeries[])	Replaces the chart's series.
Series(string, double[], string)	Appends a single named series of plain values.
Series(IObservable<double[]>, string, string)	Binds a single series to an observable sequence of values: the chart re-renders whenever the observable changes. The subscription is released when the chart leaves the DOM.
Series(IObservable<ChartSeries[]>)	Binds the chart to an observable list of series, re-rendering on every change.

Series(ChartSeries[])

public T Series(params ChartSeries[] series)

Replaces the chart's series.

Parameters

series ChartSeries[]

Series(string, double[], string)

public T Series(string name, double[] values, string color = null)

Appends a single named series of plain values.

Parameters

name string
values double[]
color string

Series(IObservable<double[]>, string, string)

public T Series(IObservable<double[]> values, string name = null, string color = null)

Binds a single series to an observable sequence of values: the chart re-renders whenever the observable changes. The subscription is released when the chart leaves the DOM.

Parameters

values IObservable<double[]>
name string
color string

Series(IObservable<ChartSeries[]>)

public T Series(IObservable<ChartSeries[]> series)

Binds the chart to an observable list of series, re-rendering on every change.

Parameters

series IObservable<ChartSeries[]>

Method

ChartBase.Colors

public T Colors(params string[] palette)

Sets the series color palette (used for series without an explicit color).

Method

ChartBase.Tooltips

public T Tooltips(bool show = true)

Enables or disables per-element tooltips.

Method

ChartBase.Legend

public T Legend(bool show = true)

Enables or disables the legend.

Method

ChartBase.Title

public T Title(string title)

Sets an accessibility caption / summary for the chart.

Method

ChartBase.FormatValues

public T FormatValues(Func<double, string> formatter)

Sets the formatter used for values in tooltips and labels.

Method

ChartBase.ColorFor

protected string ColorFor(int index, ChartSeries series)

Returns the color for the series at the given index (explicit color or palette by index).

Method

ChartBase.El

protected Element El(string name)

Creates an SVG element in the SVG namespace.

Method

ChartBase.Attr

Overload
Attr(Element, string, double)	Sets an attribute on an SVG element (double values are invariant-formatted).
Attr(Element, string, string)	Sets an attribute on an SVG element.

Attr(Element, string, double)

protected static void Attr(Element el, string name, double value)

Sets an attribute on an SVG element (double values are invariant-formatted).

Parameters

el Element
name string
value double

Attr(Element, string, string)

protected static void Attr(Element el, string name, string value)

Sets an attribute on an SVG element.

Parameters

el Element
name string
value string

Method

ChartBase.AttachPointTooltip

protected void AttachPointTooltip(Element el, string content)

Attaches a hover tooltip to an SVG element: a native <title> child (for accessibility / no-JS fallback) and, when enabled, a tippy popover reusing the bundled tippy.js.

Method

ChartBase.ClearSvg

protected void ClearSvg()

Removes every child of the SVG surface.

Method

ChartBase.QueueRender

protected void QueueRender()

Schedules a render on the next animation frame, coalescing bursts of changes.

Method

ChartBase.RenderChart

protected abstract void RenderChart(double width, double height)

Draws the chart into the SVG surface at the given pixel dimensions.

Method

ChartBase.BuildAriaLabel

protected virtual string BuildAriaLabel()

Builds the accessibility summary describing the chart's data.

Method

ChartBase.RenderLegend

protected double RenderLegend(double width, double y)

Renders the legend swatches into the supplied container element, returning its height.

Method

ChartBase.Render

public HTMLElement Render()

Renders the component's root HTML element.

Fields

Name	Description
SvgNs	The SVG namespace used for every chart element.
DefaultPalette	The default theme-aware palette (CSS variables that adapt to light/dark mode).
_container	The root container element.
_svg	The SVG surface that the chart draws into.
_series	The chart's series.
_palette	The active color palette.
_showTooltips	Whether to render per-element tippy + native <title> tooltips.
_showLegend	Whether to render the legend.
_title	An optional caption used as the accessibility summary; falls back to a generated description.
_valueFormatter	Optional formatter for values shown in tooltips / axis labels.

Field

ChartBase.SvgNs

protected const string SvgNs = "http://www.w3.org/2000/svg"

The SVG namespace used for every chart element.

Field

ChartBase.DefaultPalette

protected static readonly string[] DefaultPalette = { Theme.Colors.Blue600, Theme.Colors.Green600, Theme.Colors.Orange600, Theme.Colors.Purple600, Theme.Colors.Red600, Theme.Colors.Teal600, Theme.Colors.Yellow600, Theme.Colors.Neutral600 }

The default theme-aware palette (CSS variables that adapt to light/dark mode).

Field

ChartBase._container

protected readonly HTMLElement _container

The root container element.

Field

ChartBase._svg

protected readonly Element _svg

The SVG surface that the chart draws into.

Field

ChartBase._series

protected readonly List<ChartSeries> _series = new List<ChartSeries>()

The chart's series.

Field

ChartBase._palette

protected string[] _palette = DefaultPalette

The active color palette.

Field

ChartBase._showTooltips

protected bool _showTooltips = true

Whether to render per-element tippy + native <title> tooltips.

Field

ChartBase._showLegend

protected bool _showLegend = false

Whether to render the legend.

Field

ChartBase._title

protected string _title

An optional caption used as the accessibility summary; falls back to a generated description.

Field

ChartBase._valueFormatter

protected Func<double, string> _valueFormatter = v => v.ToString("0.##")

Optional formatter for values shown in tooltips / axis labels.

class

CartesianChartBase<T>

public abstract class CartesianChartBase<T> : ChartBase<T> where T : CartesianChartBase<T>

Base for cartesian (x/y) charts — line, bar and area. Draws the value (Y) gridlines and labels, the category (X) axis labels, the axis lines, and computes the plot rectangle and value-to-pixel scale that subclasses use to plot their series.

Namespace: Tesserae
Inheritance: ChartBase<T> → CartesianChartBase<T>

Constructors

Name	Description
CartesianChartBase	Initializes a new instance of the `CartesianChartBase{T}` class.

Constructor

CartesianChartBase

protected CartesianChartBase(double minWidth = 200, double minHeight = 120) : base(minWidth, minHeight)

Initializes a new instance of the CartesianChartBase{T} class.

Properties

Name	Description
IncludeZeroBaseline	When true the value axis always includes zero as a baseline (bar/area); when false it fits the data.

Property

CartesianChartBase.IncludeZeroBaseline

protected virtual bool IncludeZeroBaseline

When true the value axis always includes zero as a baseline (bar/area); when false it fits the data.

Methods

Name	Description
XAxis	Sets the category labels along the X axis.
XAxisTitle	Sets the X axis title.
YAxisTitle	Sets the Y axis title.
Grid	Shows or hides the horizontal gridlines.
Axes	Shows or hides the axes and their labels.
PixelY	Maps a value to its pixel Y coordinate within the plot area.
RenderChart
CategoryCenterX	Returns the pixel X coordinate of the center of category slot `index`.
PointX	Returns the pixel X coordinate for point `index` of a line/area series.
RenderSeries	Plots the series into the computed plot rectangle.

Method

CartesianChartBase.XAxis

public T XAxis(params string[] categories)

Sets the category labels along the X axis.

Method

CartesianChartBase.XAxisTitle

public T XAxisTitle(string title)

Sets the X axis title.

Method

CartesianChartBase.YAxisTitle

public T YAxisTitle(string title)

Sets the Y axis title.

Method

CartesianChartBase.Grid

public T Grid(bool show = true)

Shows or hides the horizontal gridlines.

Method

CartesianChartBase.Axes

public T Axes(bool show = true)

Shows or hides the axes and their labels.

Method

CartesianChartBase.PixelY

protected double PixelY(double value)

Maps a value to its pixel Y coordinate within the plot area.

Method

CartesianChartBase.RenderChart

protected override void RenderChart(double width, double height)

Method

CartesianChartBase.CategoryCenterX

protected double CategoryCenterX(int index)

Returns the pixel X coordinate of the center of category slot index.

Method

CartesianChartBase.PointX

protected double PointX(int index)

Returns the pixel X coordinate for point index of a line/area series.

Method

CartesianChartBase.RenderSeries

protected abstract void RenderSeries()

Plots the series into the computed plot rectangle.

Fields

Name	Description
_categories	Category labels along the X axis.
_showGrid	Whether to draw horizontal gridlines.
_showAxes	Whether to draw the axes and their labels.
_xAxisTitle	Optional X axis title.
_yAxisTitle	Optional Y axis title.
_plotLeft	Left edge of the plot area, in pixels.
_plotTop	Top edge of the plot area, in pixels.
_plotWidth	Width of the plot area, in pixels.
_plotHeight	Height of the plot area, in pixels.
_minValue	The minimum value mapped to the bottom of the plot.
_maxValue	The maximum value mapped to the top of the plot.
_pointCount	The number of categories/points along the X axis.

Field

CartesianChartBase._categories

protected string[] _categories = new string[0]

Category labels along the X axis.

Field

CartesianChartBase._showGrid

protected bool _showGrid = true

Whether to draw horizontal gridlines.

Field

CartesianChartBase._showAxes

protected bool _showAxes = true

Whether to draw the axes and their labels.

Field

CartesianChartBase._xAxisTitle

protected string _xAxisTitle

Optional X axis title.

Field

CartesianChartBase._yAxisTitle

protected string _yAxisTitle

Optional Y axis title.

Field

CartesianChartBase._plotLeft

protected double _plotLeft

Left edge of the plot area, in pixels.

Field

CartesianChartBase._plotTop

protected double _plotTop

Top edge of the plot area, in pixels.

Field

CartesianChartBase._plotWidth

protected double _plotWidth

Width of the plot area, in pixels.

Field

CartesianChartBase._plotHeight

protected double _plotHeight

Height of the plot area, in pixels.

Field

CartesianChartBase._minValue

protected double _minValue

The minimum value mapped to the bottom of the plot.

Field

CartesianChartBase._maxValue

protected double _maxValue

The maximum value mapped to the top of the plot.

Field

CartesianChartBase._pointCount

protected int _pointCount

The number of categories/points along the X axis.

class

LineChart

public sealed class LineChart : CartesianChartBase<LineChart>

A lightweight, dependency-free SVG line chart. Plots one or more series as connected polylines with hoverable points, value gridlines, category labels and a theme-aware palette. Fluent and responsive.

Namespace: Tesserae
Inheritance: CartesianChartBase<LineChart> → LineChart

Constructors

Name	Description
LineChart	Initializes a new instance of the `LineChart` class.

Constructor

LineChart

public LineChart() : base()

Initializes a new instance of the LineChart class.

Methods

Name	Description
Points	Shows or hides the per-point markers.

Method

LineChart.Points

public LineChart Points(bool show = true)

Shows or hides the per-point markers.

class

BarChart

public sealed class BarChart : CartesianChartBase<BarChart>

A lightweight, dependency-free SVG bar chart. Renders grouped bars per category (one bar per series), with a zero baseline, value gridlines, category labels, hover tooltips and a theme-aware palette.

Namespace: Tesserae
Inheritance: CartesianChartBase<BarChart> → BarChart

Constructors

Name	Description
BarChart	Initializes a new instance of the `BarChart` class.

Constructor

BarChart

public BarChart() : base()

Initializes a new instance of the BarChart class.

Methods

Name	Description
Rounded	Sets the corner radius of the bars.

Method

BarChart.Rounded

public BarChart Rounded(double radius = 2)

Sets the corner radius of the bars.

class

AreaChart

public sealed class AreaChart : CartesianChartBase<AreaChart>

A lightweight, dependency-free SVG area chart. Renders each series as a gradient-filled region under its line (matching Sparkline's fill style), with hoverable points, gridlines and category labels.

Namespace: Tesserae
Inheritance: CartesianChartBase<AreaChart> → AreaChart

Constructors

Name	Description
AreaChart	Initializes a new instance of the `AreaChart` class.

Constructor

AreaChart

public AreaChart() : base()

Initializes a new instance of the AreaChart class.

Methods

Name	Description
Points	Shows or hides the per-point markers.

Method

AreaChart.Points

public AreaChart Points(bool show = true)

Shows or hides the per-point markers.

class

PieChart

public sealed class PieChart : ChartBase<PieChart>

A lightweight, dependency-free SVG pie / donut chart. Renders the first series' values as slices, labelled by the configured category labels, with hover tooltips, an optional legend and a theme-aware palette.

Namespace: Tesserae
Inheritance: ChartBase<PieChart> → PieChart

Constructors

Name	Description
PieChart	Initializes a new instance of the `PieChart` class.

Constructor

PieChart

public PieChart() : base()

Initializes a new instance of the PieChart class.

Methods

Name	Description
Labels	Sets the per-slice labels.
Donut	Renders the chart as a donut with a hole sized as a fraction (0..1) of the radius.

Method

PieChart.Labels

public PieChart Labels(params string[] labels)

Sets the per-slice labels.

Method

PieChart.Donut

public PieChart Donut(double holeRatio = 0.6)

Renders the chart as a donut with a hole sized as a fraction (0..1) of the radius.