LineChart
Renders a responsive token-themed SVG line chart for bounded time or numeric data with explicit gaps.@gemologic/sheen-charts · dataPlayground
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Latency declined; one p99 sample is missing.
| Time | p50 | p99 |
|---|---|---|
| Jan 1, 2024, 12:00:00 AM | 18 ms | 42 ms |
| Jan 1, 2024, 12:01:00 AM | 16 ms | Missing value |
| Jan 1, 2024, 12:02:00 AM | 15 ms | 34 ms |
<LineChart label="Request latency" summary="Latency declined; one p99 sample is missing." xLabel="Time" series={requestSeries} data={requestData} x={{ type: "time", tz: "UTC" }} y={{ format: "duration" }} height={240} curve="linear"/>Variant matrix
Request latencyRequest latencyLatency declined; one p99 sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Latency declined; one p99 sample is missing.
| Time | p50 | p99 |
|---|---|---|
| Jan 1, 2024, 12:00:00 AM | 18 ms | 42 ms |
| Jan 1, 2024, 12:01:00 AM | 16 ms | Missing value |
| Jan 1, 2024, 12:02:00 AM | 15 ms | 34 ms |
curve: linearRequest latencyLatency declined; one p99 sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Latency declined; one p99 sample is missing.
| Time | p50 | p99 |
|---|---|---|
| Jan 1, 2024, 12:00:00 AM | 18 ms | 42 ms |
| Jan 1, 2024, 12:01:00 AM | 16 ms | Missing value |
| Jan 1, 2024, 12:02:00 AM | 15 ms | 34 ms |
curve: stepRequest latencyLatency declined; one p99 sample is missing.
Use Left and Right Arrow, Home, and End to inspect samples. Press Escape to clear the inspection.
View as table
Latency declined; one p99 sample is missing.
| Time | p50 | p99 |
|---|---|---|
| Jan 1, 2024, 12:00:00 AM | 18 ms | 42 ms |
| Jan 1, 2024, 12:01:00 AM | 16 ms | Missing value |
| Jan 1, 2024, 12:02:00 AM | 15 ms | 34 ms |
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 for complete bounded data under 2,000 marks and retain NaN gaps.
Do not
- Do not use SVG for high-volume or streaming time series; use TimeSeries.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
curve | "linear" | "step" | linear | Honest linear or step-after interpolation. |
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 breaks a path. |
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. |