Skip to main content

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>
  );
}

Basic bar chart Basic bar 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