AreaChart
Renders bounded SVG area series with honest NaN gaps and optional positive/negative stacking.@gemologic/sheen-charts · dataPlayground
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Reads remain above writes; one write sample is missing.
| Interval | Reads | Writes |
|---|---|---|
| 1 | 20 | 8 |
| 2 | 24 | Missing value |
| 3 | 22 | 12 |
<AreaChart label="Traffic" summary="Reads remain above writes; one write sample is missing." xLabel="Interval" series={trafficSeries} data={trafficData} x={{ type: "number" }} height={240} stacked curve="linear"/>Variant matrix
Traffic volumeTrafficReads remain above writes; one write sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Reads remain above writes; one write sample is missing.
| Interval | Reads | Writes |
|---|---|---|
| 1 | 20 | 8 |
| 2 | 24 | Missing value |
| 3 | 22 | 12 |
curve: linearTrafficReads remain above writes; one write sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Reads remain above writes; one write sample is missing.
| Interval | Reads | Writes |
|---|---|---|
| 1 | 20 | 8 |
| 2 | 24 | Missing value |
| 3 | 22 | 12 |
curve: stepTrafficReads remain above writes; one write sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Reads remain above writes; one write sample is missing.
| Interval | Reads | Writes |
|---|---|---|
| 1 | 20 | 8 |
| 2 | 24 | Missing value |
| 3 | 22 | 12 |
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/ContinuousSvgChart.tsx- Tokens
--sheen-chart-1--sheen-chart-2--sheen-chart-grid--sheen-chart-axis--sheen-chart-line-width--sheen-color-fg--sheen-color-fg-muted
Accessibility
Role: labeled SVG image with visible narrative and native table disclosureKeyboard: Focus the plot and use Left/Right, Home/End, and Escape to inspect samples., Use the native view-as-table disclosure for every exact sample.Do
- Use stacking only when totals and component contribution are meaningful.
Do not
- Do not interpolate or fill across NaN gaps.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
curve | "linear" | "step" | linear | Honest linear or step-after interpolation. |
stacked | boolean | false | Stacks positive and negative values independently. |
label * | string | — | Required visible and accessible chart name. |
summary * | string | — | Required narrative interpretation. |
xLabel * | string | — | Required domain-axis and native-table label. |
series * | readonly ChartSeries[] | — | Validated series definitions with semantic colors and optional non-color line encodings. |
data * | ChartData | — | Equal-length Float64 columns; NaN terminates line and fill. |
x * | import("./chart-types.ts").ChartTimeAxis | import("./chart-types.ts").ChartNumberAxis | — | Time or numeric domain formatting. |
y | import("./chart-types.ts").ChartValueAxis | — | Shared value formatting and optional zero baseline. |
height * | number | — | Reserved SVG height, at least 120 CSS pixels. |
legend | import("./chart-types.ts").ChartLegend | inline | Inline, stacked, or hidden series key. |
tooltip | boolean | true | Whether single-tab-stop pointer and keyboard inspection is enabled. |
annotations | readonly ChartAnnotation[] | — | Optional labeled domain positions. |
empty | JSX.Element | — | Optional empty-state content. |
loading | boolean | false | Marks retained accepted content busy. |
table | import("./chart-types.ts").ChartTableOptions | — | Native-table disclosure label and bounded page size. |
class | string | — | Optional class appended to the figure. |