LineChart
One or more smoothed trend lines over time, with tone-driven series colors and optional dimmed, dashed ghost baselines for projections or comparisons.
Implementation previewEvery example. In one place.
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/visualizations/LineChart/LineChart.stories.tsxExport DefaultImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
One or more smoothed trend lines over time, with tone-driven series colors and optional dimmed, dashed ghost baselines for projections or comparisons.
Implementation API 1 entry point · source-derived preview
Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.
import { LineChart } from '@cloakedinc/design-system';LineChartLineChartProps
packages/design-system/src/components/visualizations/LineChart/LineChart.tsx:14
| Prop | Type | Presence | Notes |
|---|---|---|---|
series | DataVisualizationSeries[] | Required | Primary series rendered as chart lines. |
ghostSeries | DataVisualizationSeries[] | undefined | Optional | Optional ghosted comparison series. |
ariaLabel | string | undefined | Optional | Accessible label for meaningful charts. |
testId | string | undefined | Optional | Optional test selector. |
maxPoints | number | undefined | Optional | Maximum number of points included from each series. |
smoothingWindow | number | undefined | Optional | Moving-average window used to smooth series values. |
Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.
Overview
One or more smoothed trend lines rendered as a plain SVG — the shape of a metric over time.
When to use
Reach for LineChart when the data is a continuous trajectory and the shape of the trend
matters more than exact per-bucket magnitudes — especially when overlaying several series to
compare their trajectories. Distinguish series with tone (the neutral SERIES_TONES for
identity, or the RISK_TONES when severity carries meaning) or an explicit color.
Pick BarChart instead when the reader must scrub discrete time buckets or read exact values;
CategoryBars when the x-axis is a set of named categories rather than time; HalfGauge or
RiskMeter for a single bounded score. When you want this line wrapped with a headline value
and a stat delta in a Card, use MetricLineChartCard rather than composing it yourself.
Not currently consumed by the app — the exposures trend view ships a bespoke D3-based line chart. This is the design-system primitive to migrate toward.
Comparison baseline
Pass ghostSeries for a projected or comparison line — it auto-dashes and dims behind the
solid series.
Component specification
$schema
../../../specs/component-spec.schema.jsonParts
- Id
- plot
- Label
- Plot
- Description
- The SVG canvas that stretches the trend paths to fill its box.
- Required
- true
- Id
- series-line
- Label
- Series line
- Description
- A solid trend line colored by tone or explicit color.
- Id
- ghost-line
- Label
- Ghost line
- Description
- A dimmed, dashed comparison or projection line behind the series.
Allowed Design Choices
- Variants
- Base
- Label
- Base
- Description
- Series data and tone change the reading without changing the plot treatment.
- Sizes
Variants
- Id
- base
- Label
- Base
- Description
- A stretched SVG plot rendering one or more tone-colored trend lines.
- Platforms
- ios
- android
- web
Sizes
None specifiedMeasurements
- Id
- plot-height
- Label
- Plot height
- Kind
- exact
- Token
- --cds-size-80
- Value
- 80
- Unit
- px
- Applies To
- plot
- Id
- dash-gap
- Label
- Dashed line gap
- Kind
- exact
- Token
- --cds-size-4
- Value
- 4
- Unit
- px
- Applies To
- ghost-line
- Notes
- The dashed stroke pairs an --cds-size-8 dash with this --cds-size-4 gap.
Layout
- Alignment
- The plot fills the container width and its fixed height, stretching paths to the box.
- Flow
- All series and ghost lines share one non-uniformly scaled SVG plot.
- Notes
- The plot uses a non-uniform aspect ratio, so lines scale to fill rather than preserve shape.
Typography And Color
- Typography
- Label
- Adjacent caption
- Description
- Surrounding axis or legend labels use the body-small ramp; the plot draws no text itself.
- Token
- --cds-type-body-small-size
- Colors
- Label
- Default line
- Description
- A series with no tone or color falls back to primary text.
- Token
- --cds-text-primary
- Label
- Brand series
- Description
- The brand series tone for neutral multi-line identity.
- Token
- --cds-brand
- Label
- Low-risk series
- Description
- The good risk tone for severity-carrying series.
- Token
- --cds-risk-good
- Label
- High-risk series
- Description
- The critical risk tone for severity-carrying series.
- Token
- --cds-risk-critical
States
- Id
- single
- Label
- Single series
- Description
- One line renders the sparkline case.
- Id
- multi
- Label
- Multiple series
- Description
- Several tone-distinguished lines overlay in one plot.
- Id
- ghosted
- Label
- Ghosted
- Description
- A solid series sits over a dimmed, dashed ghost baseline.
- Id
- empty
- Label
- Empty
- Description
- No renderable series, so nothing is drawn and an upstream empty state should show.
Behavior
- Label
- Two-point minimum
- Description
- A series needs at least two points to form a line; single points are dropped.
- Label
- Tone or color
- Description
- Distinguish series with a tone; set an explicit color for hues outside the tone system.
- Label
- Trim and smooth
- Description
- maxPoints downsamples long inputs and smoothingWindow applies a moving average.
Accessibility
- Label
- Meaningful chart
- Description
- Pass an accessible label so the plot is announced as a meaningful image.
- Label
- Decorative chart
- Description
- Omit the label to hide the plot from assistive technology when nearby text carries the trend.
Content Adaptation
- Label
- Trend over magnitude
- Description
- Prefer LineChart when the shape of the trend matters more than discrete bar magnitudes.
- Label
- Ghost baselines
- Description
- Use ghost series for a projected or comparison baseline behind the primary lines.
Motion Haptics
- Motion
- Label
- No intrinsic motion
- Description
- The plot does not animate on mount; a parent may transition the whole chart.
- Haptics
- Label
- No feedback
- Description
- The chart is a display and requests no haptic feedback.