Table Pattern & Trend Sparkline

---

An inline area-chart sparkline showing directional trend within a table cell.

Variants

Visual Reference

Anatomy

Dimensions

Rendering Notes

• Area fill: SVG <path> with vertical gradient from stroke colour to transparent.
• Line: separate SVG path on top of area fill — same stroke colour, no fill.
• Endpoint dot marks the last data point (right edge). Positive = near top; negative = near bottom.
• Baseline: dashed reference line (period start value) — positioned opposite to trend direction.
• Generate from an array of numeric values. Min 2 points, recommended 7–12 for 85px width.
• Ensure overflow: clip on container — area path intentionally bleeds 1px beyond bounds.

Accessibility

• Add role="img" and aria-label describing the trend, e.g. "Trend: up 12.1%".
• When paired with the Delta text column, aria-hidden="true" is acceptable (decorative).

---

Architecture

Table
├── Header Row (Columns)
│   └── Header Cell × n
├── Body Row × n
│   ├── Text Cell (left-aligned — labels)
│   ├── Sparkline Cell (left-aligned — ChartSpark)
│   ├── Numerical Cell (right-aligned — values)
│   ├── Delta Cell (right-aligned — change indicator)
│   └── Numerical Cell (right-aligned — counts)

Header Row

Body Rows

Cell Types

Delta Cell

The delta indicator shows percentage change and absolute value.

Column Widths (reference — within widget shell)

Figma reference widths inside a ~602px widget. In production, use proportional/flex sizing:

Border Collapse

Cells use margin-right: -1px to collapse shared vertical borders. The last cell in each row omits this negative margin.

---

---