v2.0Utility

Time to Value Sparkline

Inline sparkline chart visualizing a time-to-value trend across data points. SVG-based line with optional area fill, point markers, and a summary label.

View source on GitHub

Live preview

Rendered with real component code. Each example demonstrates a documented variant.

Default - descending time-to-value trend

See this component used in context in the Threshold reference build.

Median TTFV by week

React props

Configure the component via props in React or via attributes in HTML.

Prop	Type	Default	Description
data	number[]	required	Series values in chronological order, left to right; minimum 2 values
title	string	"Median TTFV by week"	Uppercase label rendered above the chart
startLabel	string	"12 weeks ago"	Left-side footer text indicating the start of the series
summaryLabel	string	auto-generated	Right-side footer text summarizing the change; when omitted, auto-generated as first and last values joined with "to"
ariaLabel	string	auto-generated	Accessible label for the root element; when omitted, auto-generated from title and data range
className	string	undefined	Optional extra class name for the root element
style	React.CSSProperties	undefined	Optional inline style for CSS variable overrides on the root element

HTML usage

The HTML variant uses the same shared styles and class names. Drop into any stack.

<link rel="stylesheet" href="path/to/time-to-value-sparkline/styles.css">

<!--
  The HTML variant requires an inline SVG constructed from your data.
  Compute the polyline points from your series values and the 240x60 viewBox.
  See the React source for the exact coordinate math.
-->
<div class="ttvs" role="img" aria-label="Median TTFV by week sparkline from 9.4 to 4.8">
  <p class="ttvs__title">Median TTFV by week</p>

  <svg class="ttvs__chart" width="240" height="60" viewBox="0 0 240 60" aria-hidden="true">
    <!-- area fill path (close to bottom) -->
    <path class="ttvs__area" d="M 4,52 L 26,46 L 48,42 ... L 236,8 L 236,60 L 4,60 Z" />
    <!-- sparkline stroke -->
    <path class="ttvs__line" d="M 4,52 L 26,46 L 48,42 ... L 236,8" />
    <!-- data point dots -->
    <circle class="ttvs__point" cx="4" cy="52" r="1.5" />
    <!-- ... -->
    <!-- highlighted endpoint -->
    <circle class="ttvs__point ttvs__point--end" cx="236" cy="8" r="3" />
  </svg>

  <div class="ttvs__footer">
    <span class="ttvs__start">12 weeks ago</span>
    <span class="ttvs__summary">9.4d to 4.8d</span>
  </div>
</div>

Customization

Override these CSS custom properties to integrate the component into your brand.

.ttvs {
  --ttvs-title-color: var(--brand-muted, #4a5568);
  --ttvs-title-size: 0.625rem;
  --ttvs-title-weight: 600;
  --ttvs-title-tracking: 0.12em;
  --ttvs-line-color: var(--brand-accent, #5b8b85);
  --ttvs-line-width: 1.5px;
  --ttvs-area-color: var(--brand-accent, #5b8b85);
  --ttvs-area-opacity: 0.12;
  --ttvs-point-color: var(--brand-accent, #5b8b85);
  --ttvs-endpoint-color: var(--brand-highlight, #8e6e1a);
  --ttvs-start-color: var(--brand-muted, #4a5568);
  --ttvs-summary-color: var(--brand-positive, #3f6e55);
  --ttvs-summary-weight: 600;
  --ttvs-footer-size: 0.75rem;
  --ttvs-mono-font: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --ttvs-max-width: 280px;
  --ttvs-gap: 0.5rem;
}