Introduction to React Spectrum Charts
React Spectrum Charts is a declarative library for composing Spectrum visualizations in React. It provides a set of React components that make it easy to create beautiful, accessible, and interactive charts that follow Adobe's Spectrum design system.
Features
- 🎨 Spectrum Design System: Built on Adobe's Spectrum design system for consistent and beautiful visualizations
- ⚛️ React-First: Fully integrated with React's component model and lifecycle
- 📊 Declarative API: Create complex visualizations with simple, declarative components
- 🎯 Interactive: Rich interaction capabilities
- 🛠️ Feature-Rich: Extensive API allows for a great balance of simplicity and control
Quick Start
Install React Spectrum Charts in your project:
# Using npm
npm install @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
# Using yarn
yarn add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
# Using pnpm
pnpm add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite
Create your first chart:
import { Axis, Bar, Chart } from '@adobe/react-spectrum-charts';
function MyChart() {
const data = [
{ category: 'A', value: 10 },
{ category: 'B', value: 20 },
{ category: 'C', value: 15 },
];
return (
<Chart data={data}>
<Bar />
<Axis position="bottom" baseline/>
<Axis position="left" grid/>
</Chart>
);
}
Next Steps
- Check out the Installation guide for detailed setup instructions
- Learn about basic chart types in the Basic Charts guide
- Explore the API Reference for detailed component documentation