Data & Chartsregistry/ui/tone-area-chart.tsx/r/tone-area-chart.json

ToneAreaChart

Screentone halftone area chart with 4-band dot-density fade, speech-balloon peak callout, keyboard/pointer crosshair, and collapsible data table.

← All Components

Light · Paper.f12-theme-light

Interactive preview

Show light chart data table

Date	Recovered revenue
Oct 31, 2026	$5,654
Oct 30, 2026	$5,179
Oct 29, 2026	$4,720
Oct 28, 2026	$4,038
Oct 27, 2026	$3,998
Oct 26, 2026	$4,187
Oct 25, 2026	$5,029

Dark · Flashback.f12-theme-dark

Interactive preview

Show dark chart data table

Date	Recovered revenue
Oct 31, 2026	$5,654
Oct 30, 2026	$5,179
Oct 29, 2026	$4,720
Oct 28, 2026	$4,038
Oct 27, 2026	$3,998
Oct 26, 2026	$4,187
Oct 25, 2026	$5,029

Install & copy-in source

shadcn CLI (tone-area-chart.json)

npx shadcn@latest add https://frame12.dev/r/tone-area-chart.json

Usage example (ToneAreaChart)

import { ToneAreaChart, fmtCurrency } from '@/components/frame12';

export function RecoveryTrend({ data }: { data: Array<{ label: string; value: number }> }) {
  return (
    <ToneAreaChart
      data={data}
      seriesLabel="Recovered revenue"
      formatValue={fmtCurrency}
      height={240}
    />
  );
}

WCAG AAAccessibility guarantees

Accessibility notes

Focusable SVG (tabIndex={0}) supports ArrowLeft, ArrowRight, and Escape for full keyboard inspection.
Always includes a collapsible <details className="f12-tbl"> table with <th scope="col"> headers.

GrammarFRAME/12 rules

Design grammar

Replaces CSS/SVG color gradients with four vertical 45° rotated screentone dot-radius bands (1.25px to 0.62px).
Peak annotation is a speech balloon with a mitered tail pointing to the marker-yellow peak dot.

Props & TypeScript API

Exported from @/components/frame12 (registry/ui/tone-area-chart.tsx)
Prop	Type	Default	Description
`data`	`ToneAreaDatum[]`	`required`	Array of { label, longLabel?, value, compareValue? } points.
`seriesLabel`	`string`	`'Value'`	Primary series label shown in the crosshair readout and table header.
`compareLabel`	`string`	`undefined`	Optional dashed comparison series label.
`height`	`number`	`260`	SVG chart height in pixels.
`showTable`	`boolean`	`true`	Renders the accessible <details className="tbl"> semantic data table.