Skip to main content

Lab Components

Lab components are chart types and child components that are functional and available for use, but don't yet have a finalized Spectrum 2 visual design. Their API and visual behavior may change significantly in any release. See Component Stages for how lab components graduate to alpha.

Lab components:

  • Are functional — full prop support for the underlying chart type, ported from the base @adobe/react-spectrum-charts package
  • Have no finalized Spectrum 2 design — visual styling may change once a design is available
  • May have breaking API changes in future releases without following semver
  • Are open for feedback — please report issues or suggest improvements

Current lab components​

  • Area — area charts
  • Scatter — scatter plots, with ScatterPath, ScatterAnnotation, and Trendline (+ TrendlineAnnotation) child components
  • Bullet — bullet charts for KPI progress against targets, with ChartInspect support
  • Combo — overlays a Bar mark and a Line mark in the same chart

Importing lab components​

Lab components are imported from a separate lab export:

import { Chart, Axis } from '@spectrum-charts/react-spectrum-charts-s2';
import { Scatter, ScatterPath } from '@spectrum-charts/react-spectrum-charts-s2/lab';

<Chart data={data}>
  <Axis position="bottom" />
  <Axis position="left" />
  <Scatter dimension="x" metric="y" color="series">
    <ScatterPath groupBy={['series']} />
  </Scatter>
</Chart>

Providing feedback​

If you use lab components and have feedback, please:

  • Open an issue on GitHub
  • Share your use case and requirements
  • Report any bugs or unexpected behavior

Your feedback helps shape these components before they graduate to alpha.