Tesserae

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.js

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 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.js

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 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.js

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 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.js

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 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.js

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 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.js

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 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);
        }
    }
}