Tesserae - Sparkline

Sparkline

Description

A compact inline trend chart

Sparkline renders a compact SVG area chart designed to be embedded alongside metric values, table cells, or dashboard cards. It conveys the shape of a trend at a glance without axes, labels, or interactive controls.

The chart accepts a data array of doubles and optional width, height, and color parameters, making it easy to match any layout or brand color.

Samples

Upward Trend

sparkline-upward-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Revenue").W(120.px()),
                Sparkline(new double[] { 10, 14, 18, 15, 22, 28, 25, 35, 40, 50 }, width: 150, height: 40, color: Theme.Colors.Green600)
            );

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

Downward Trend

sparkline-downward-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Error Rate").W(120.px()),
                Sparkline(new double[] { 50, 45, 40, 48, 30, 28, 20, 15, 12, 10 }, width: 150, height: 40, color: "var(--tss-danger-background-color)")
            );

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

Flat / Stable

sparkline-flat-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Latency (ms)").W(120.px()),
                Sparkline(new double[] { 30, 31, 29, 30, 32, 30, 31, 29, 30, 31 }, width: 150, height: 40, color: Theme.Colors.Neutral500)
            );

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

Volatile / Random

sparkline-volatile-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Requests").W(120.px()),
                Sparkline(new double[] { 10, 40, 15, 55, 20, 60, 5, 45, 30, 70, 25, 50 }, width: 150, height: 40, color: Theme.Colors.Blue600)
            );

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

Primary Color (default)

sparkline-primary-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Conversions").W(120.px()),
                Sparkline(new double[] { 10, 20, 15, 30, 25, 40, 35, 50 }, width: 150, height: 40)
            );

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

Larger Chart

sparkline-large-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Sparkline(new double[] { 5, 10, 8, 20, 18, 35, 30, 45, 42, 60, 55, 70 }, width: 300, height: 80, color: Theme.Colors.Green600).WS();

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

Dashboard Card with Metric and Sparkline

Sparklines are most useful when paired with a headline metric. The cards below combine a primary number, the period-over-period delta, and a sparkline for shape — each tile uses a different palette to highlight the trend direction.

sparkline-card-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static IComponent Tile(string title, string value, string change, double[] data, string color)
        {
            return Card(VStack().Children(
                TextBlock(title).Small().Secondary(),
                TextBlock(value).XXLarge().SemiBold(),
                TextBlock(change).Small(),
                Sparkline(data, width: 200, height: 40, color: color).WS().PT(8)
            ).Padding(16.px())).MinWidth(220.px());
        }

        private static void Main()
        {
            var dashboard = HStack().Children(
                Tile("Revenue",   "$48,231", "+12.4% vs last week", new double[]{ 22, 25, 28, 26, 32, 38, 48 }, Theme.Colors.Green600),
                Tile("Errors",    "1.8%",    "-0.6% vs last week", new double[]{ 50, 45, 40, 48, 30, 28, 20 }, "var(--tss-danger-background-color)"),
                Tile("Sessions",  "12,408",  "stable",            new double[]{ 30, 31, 29, 30, 32, 30, 31 }, Theme.Colors.Neutral500)
            ).Gap(12.px()).Padding(16.px());

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

Dynamic Sparkline (Refresh on Click)

Sparkline re-renders whenever it is added to a container, so you can drive interactivity by swapping the chart for a new instance on a user action. The button below replaces the current chart with a freshly-randomised data set.

sparkline-dynamic-sample.cs

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var random = new Random();
            double[] Generate() =>
                Enumerable.Range(0, 12).Select(_ => random.NextDouble() * 100).ToArray();

            var host = Stack();
            var chart = Sparkline(Generate(), width: 300, height: 60, color: Theme.Colors.Blue600);

            void Refresh()
            {
                var fresh = Sparkline(Generate(), width: 300, height: 60, color: Theme.Colors.Blue600);
                host.Replace(fresh, chart);
                chart = fresh;
            }

            var component = VStack().Children(
                host.Children(chart),
                Button("Refresh data").Primary().SetIcon(UIcons.Refresh).MT(12)
                    .OnClick((s, e) => Refresh())
            ).Padding(16.px());

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

API reference

class

Sparkline

public class Sparkline : IComponent

A tiny inline line chart used to show a trend without occupying chart-sized real-estate.

Namespace: Tesserae
Implements: IComponent

Constructors

Name	Description
Sparkline	Initializes a new instance of this class.

Constructor

Sparkline

public Sparkline(double[] data, double width = 100, double height = 30, string color = "")

Initializes a new instance of this class.

Methods

Name	Description
StrokeWidth	Sets the width of the line, in pixels. The line keeps that width when the chart is stretched to fill its row, rather than being scaled with the drawing.
Fill	Turns the tinted area under the line on or off. On by default.
EndMarker	Marks the last point of the series with a dot in the line's colour - the "this week" end of a trend that runs up to now.
ReferenceLine	Draws a dotted horizontal line across the chart at the given value - a target, a threshold or a baseline the trend should be read against. A value outside the range of the series is clamped to the nearest edge of the chart.
Render	Renders the component's root HTML element.

Method

Sparkline.StrokeWidth

public Sparkline StrokeWidth(double width)

Sets the width of the line, in pixels. The line keeps that width when the chart is stretched to fill its row, rather than being scaled with the drawing.

Method

Sparkline.Fill

public Sparkline Fill(bool value = true)

Turns the tinted area under the line on or off. On by default.

Method

Sparkline.EndMarker

public Sparkline EndMarker(bool value = true)

Marks the last point of the series with a dot in the line's colour - the "this week" end of a trend that runs up to now.

Method

Sparkline.ReferenceLine

Overload
ReferenceLine(double)	Draws a dotted horizontal line across the chart at the given value - a target, a threshold or a baseline the trend should be read against. A value outside the range of the series is clamped to the nearest edge of the chart.
ReferenceLine()	Draws a dotted horizontal line across the chart at the mean of the series.

ReferenceLine(double)

public Sparkline ReferenceLine(double value)

Draws a dotted horizontal line across the chart at the given value - a target, a threshold or a baseline the trend should be read against. A value outside the range of the series is clamped to the nearest edge of the chart.

Parameters

value double

ReferenceLine()

public Sparkline ReferenceLine()

Draws a dotted horizontal line across the chart at the mean of the series.

Method

Sparkline.Render

public HTMLElement Render()

Renders the component's root HTML element.

Sparkline

Description

Samples

Upward Trend

Downward Trend

Flat / Stable

Volatile / Random

Primary Color (default)

Larger Chart

Dashboard Card with Metric and Sparkline

Dynamic Sparkline (Refresh on Click)

API reference

Constructors

Sparkline

Methods

Sparkline.StrokeWidth

Sparkline.Fill

Sparkline.EndMarker

Sparkline.ReferenceLine

ReferenceLine(double)

Parameters

ReferenceLine()

Sparkline.Render

See also