ChartDataTable
Provides a bounded, localized native-table alternative and narrative summary for a chart.@gemologic/sheen-charts · dataPlayground
This example has no scalar controls. Its validated source remains interactive below.
View as table
Latency generally declined; one sample is missing.
| Time | p99 latency |
|---|---|
| Jan 1, 2024, 12:00:00 AM | 42 ms |
| Jan 1, 2024, 12:01:00 AM | Missing value |
<ChartDataTable label="API latency" summary="Latency generally declined; one sample is missing." xLabel="Time" series={latencySeries} data={latencyData} x={{ type: "time", tz: "UTC" }} y={{ format: "duration" }} />Variant matrix
Latency data alternative
View as table
Latency generally declined; one sample is missing.
| Time | p99 latency |
|---|---|
| Jan 1, 2024, 12:00:00 AM | 42 ms |
| Jan 1, 2024, 12:01:00 AM | Missing value |
Anatomy
- Package
@gemologic/sheen-charts- Source
packages/charts/src/ChartDataTable.tsx- Tokens
--sheen-color-fg--sheen-color-fg-muted--sheen-color-border--sheen-color-bg-subtle
Accessibility
Role: native details disclosure containing a captioned tableKeyboard: Enter or Space toggles the native summary., Pagination uses native button order.Do
- Give every chart a concise narrative summary and preserve gaps as missing values.
- Keep page sizes bounded even though chart data is already in memory.
Do not
- Do not mount an entire high-volume time series as table rows.
- Do not format dates with the browser's implicit timezone or locale.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
label * | string | — | Required accessible table caption naming the chart data. |
summary * | string | — | Required narrative description shown when the table disclosure opens. |
xLabel * | string | — | Required header for the time or numeric domain column. |
series * | readonly import("./chart-types.ts").ChartSeries[] | — | Validated series definitions used as column headers. |
data * | import("./chart-types.ts").ChartData | — | Validated equal-length Float64 columns; NaN cells remain explicit gaps. |
x * | import("./chart-types.ts").ChartTimeAxis | import("./chart-types.ts").ChartNumberAxis | — | Time or numeric domain formatting; omitted timezones deterministically use UTC. |
y | import("./chart-types.ts").ChartValueAxis | — | Shared value formatting for every series column. |
pageSize | number | 50 | Rows mounted per table page, from 1 through 200. |
viewLabel | string | — | Optional localized disclosure label; context messages supply the default. |
loading | boolean | false | Marks the retained accepted table busy without replacing its rows. |
class | string | — | Optional class appended to the disclosure root. |