Sparkline

A Sparkline is a word-sized trend line for tables, metrics and dense layouts. It shows the shape of a trend, not exact values.

Usage#

import { Sparkline } from "@clawscale/react";

<Sparkline data={[412, 438, 425, 461, 490]} width={96} label="Requests per minute" />

Examples#

Fixed width#

Set width and height in pixels. data runs oldest first, and a dot marks the last point unless showLastPoint is false.

patterns/sparkline/fixed-width.tsx

import { Sparkline } from "@clawscale/react";

const requests = [412, 438, 425, 461, 455, 490, 472, 508, 531, 519, 544, 562];

export default function SparklineFixedWidth() {
  return (
    <>
      <Sparkline data={requests} width={120} height={32} label="Requests per minute, last hour" />
      <Sparkline data={requests} width={64} height={16} label="Requests per minute, last hour" />
    </>
  );
}

Fluid width#

Leave width unset to fill the container. The line keeps its stroke width as it stretches. Drag the corner of the box to try it.

patterns/sparkline/fluid.tsx

import { Sparkline } from "@clawscale/react";

const cpu = [38, 41, 40, 44, 47, 45, 52, 58, 55, 61, 57, 54, 49, 51, 47, 44];

export default function SparklineFluid() {
  return (
    <div
      style={{
        border: "1px solid var(--cs-color-border)",
        borderRadius: "var(--cs-radius-md)",
        maxWidth: "100%",
        overflow: "hidden",
        padding: 12,
        resize: "horizontal",
        width: 320,
      }}
    >
      <Sparkline data={cpu} height={40} label="CPU utilization, last 80 minutes" />
    </div>
  );
}

Area#

area fills the space under the line with a light wash of its color. Set min={0} so the filled area starts at zero.

patterns/sparkline/area.tsx

import { Sparkline } from "@clawscale/react";

const queued = [120, 180, 90, 240, 310, 150, 80, 60, 210, 170, 90, 70];
const running = [34, 36, 35, 38, 40, 39, 41, 42, 40, 43, 44, 45];

export default function SparklineArea() {
  return (
    <>
      <Sparkline data={queued} width={120} height={32} area min={0} label="Queued jobs, last 12 hours" />
      <Sparkline data={running} width={120} height={32} area min={0} label="Running workers, last 12 hours" />
    </>
  );
}

Colors#

color takes any CSS color. Use the chart tokens in slot order: the first series gets --cs-chart-1, the second --cs-chart-2. See Charts.

us-east-1

eu-west-1

ap-southeast-2

us-west-2

patterns/sparkline/colors.tsx

import { Sparkline } from "@clawscale/react";

const regions = [
  { name: "us-east-1", data: [8120, 8340, 8290, 8610, 8580, 8870, 8930, 9050, 9120, 9260, 9310, 9400] },
  { name: "eu-west-1", data: [6480, 6420, 6510, 6390, 6300, 6340, 6250, 6220, 6180, 6150, 6120, 6100] },
  { name: "ap-southeast-2", data: [3900, 3700, 3500, 3400, 3450, 3300, 3250, 3300, 3200, 3150, 3250, 3200] },
  { name: "us-west-2", data: [2100, 2250, 2400, 2380, 2500, 2620, 2580, 2700, 2760, 2840, 2810, 2900] },
];

export default function SparklineColors() {
  return (
    <div style={{ display: "grid", gap: 8 }}>
      {regions.map((region, index) => (
        <div key={region.name} style={{ alignItems: "center", display: "flex", gap: 12 }}>
          <Sparkline
            data={region.data}
            width={120}
            color={`var(--cs-chart-${index + 1})`}
            label={`Throughput, ${region.name}`}
          />
          {region.name}
        </div>
      ))}
    </div>
  );
}

Value range#

By default the line spans the smallest to the largest value, which magnifies small changes. Set min and max to put sparklines on a fixed scale, such as 0 to 100 for percentages.

Default0 to 100

patterns/sparkline/range.tsx

import { Classes, Sparkline } from "@clawscale/react";

const cpu = [41, 43, 42, 44, 43, 45, 44, 46, 45, 47, 46, 48];

export default function SparklineRange() {
  return (
    <div style={{ alignItems: "center", display: "grid", gap: "12px 16px", gridTemplateColumns: "auto auto" }}>
      <span className={Classes.TEXT_MUTED}>Default</span>
      <Sparkline data={cpu} width={120} label="CPU utilization in percent, scaled to the data" />
      <span className={Classes.TEXT_MUTED}>0 to 100</span>
      <Sparkline data={cpu} width={120} min={0} max={100} label="CPU utilization in percent, scaled 0 to 100" />
    </div>
  );
}

In a table#

Put a fixed-width sparkline in its own column, next to the number it summarizes. Each sparkline scales to its own data, so the number column carries the magnitude.

Endpoint	Requests/min	Last 24 hours
/v1/orders	8,412
/v1/search	5,307
/v1/invoices	1,186
/v1/auth/token	942

patterns/sparkline/table.tsx

import { ClawscaleClasses, HTMLTable, Sparkline } from "@clawscale/react";

const endpoints = [
  { path: "/v1/orders", rpm: 8412, trend: [6120, 5480, 5010, 5890, 7240, 8120, 8650, 8930, 8810, 8560, 8390, 8412] },
  { path: "/v1/search", rpm: 5307, trend: [3980, 3620, 3410, 3890, 4620, 5140, 5480, 5620, 5510, 5390, 5280, 5307] },
  { path: "/v1/invoices", rpm: 1186, trend: [1420, 1380, 1310, 1290, 1250, 1240, 1220, 1210, 1200, 1195, 1190, 1186] },
  { path: "/v1/auth/token", rpm: 942, trend: [620, 580, 560, 690, 840, 910, 960, 990, 970, 950, 945, 942] },
];

const count = new Intl.NumberFormat("en-US");

export default function SparklineTable() {
  return (
    <HTMLTable compact>
      <thead>
        <tr>
          <th>Endpoint</th>
          <th style={{ textAlign: "right" }}>Requests/min</th>
          <th>Last 24 hours</th>
        </tr>
      </thead>
      <tbody>
        {endpoints.map((endpoint) => (
          <tr key={endpoint.path}>
            <td className={ClawscaleClasses.MONOSPACE}>{endpoint.path}</td>
            <td className={ClawscaleClasses.NUMERIC} style={{ textAlign: "right" }}>
              {count.format(endpoint.rpm)}
            </td>
            <td>
              <Sparkline data={endpoint.trend} width={96} height={18} label={`Requests per minute, ${endpoint.path}`} />
            </td>
          </tr>
        ))}
      </tbody>
    </HTMLTable>
  );
}

Accessibility#

The SVG has role="img" and a generated label with the low, high and last values. Pass label to say what the data is, for example "Requests per minute, last hour".

Props interface#

Sparkline also accepts SVG attributes.

interface SparklineProps extends Omit<SVGProps<SVGSVGElement>, "values" | "color" | "min" | "max">@clawscale/react

Props	Description
`area`	`boolean` Fill the area under the line.
`color`	`string` = `"var(--cs-chart-1)"` Line color. Any CSS color, such as a token.
`data`required	`readonly number[]` Data points, oldest first.
`height`	`number` = `24` Height in pixels.
`label`	`string` Accessible name, for example "Requests over the last 24 hours".
`max`	`number` Top of the value range. Defaults to the largest value.
`min`	`number` Bottom of the value range. Defaults to the smallest value.
`showLastPoint`	`boolean` = `true` Mark the last point with a dot.
`width`	`number` Width in pixels. Leave unset to fill the container.