Skip to content

docs: s2 #671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
marshallpete wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: s2 #671

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50d0e5c
docs: s2
marshallpete Dec 4, 2025
c614a07
docs: update
marshallpete Dec 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion packages/docs/docs/api/Chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,24 @@ The chart integrates with @adobe/react-spectrum's theming system through the `th
</Chart>
```

## Spectrum 2 Styling

React-spectrum-charts supports Adobe's Spectrum 2 design system through the `s2` prop. When enabled, charts automatically adopt Spectrum 2 visual styles, including:

- Updated color palettes (e.g., `s2Categorical6`, `s2Categorical12`, etc.)
- Modern visual refinements aligned with the Spectrum 2 design language

This is particularly useful for applications migrating to or built with Spectrum 2 components, ensuring visual consistency across your entire interface.

```jsx
<Chart data={data} s2>
<Bar metric="sales" />
<Legend />
</Chart>
```

When `s2` is enabled, the chart will automatically use Spectrum 2 defaults. You can still override individual styling properties as needed through other props.

## Locale

`react-spectrum-charts` supports locale for both number and date/time values. There are multiple methods available for setting the locale definitions.
Expand Down Expand Up @@ -474,7 +492,7 @@ const timeLocale: TimeLocale = {
<td>s2</td>
<td>boolean</td>
<td>false</td>
<td>Enables Spectrum 2 styling for some charts. Currently supported: Donut.</td>
<td>Enables Spectrum 2 styling for the chart. When set to true, applies Spectrum 2 design system defaults including updated colors, typography, and spacing. This ensures visual consistency with applications using Adobe's Spectrum 2 design language.</td>
</tr>
<tr>
<td>theme</td>
Expand Down
Loading