{"id":33918430,"url":"https://github.com/adobe/react-spectrum-charts","last_synced_at":"2026-04-20T20:04:10.673Z","repository":{"id":191452130,"uuid":"679370618","full_name":"adobe/react-spectrum-charts","owner":"adobe","description":"Build compelling visualizations using declarative react components. ","archived":false,"fork":false,"pushed_at":"2026-04-17T19:10:14.000Z","size":65817,"stargazers_count":116,"open_issues_count":38,"forks_count":24,"subscribers_count":11,"default_branch":"main","last_synced_at":"2026-04-17T21:07:18.601Z","etag":null,"topics":["adobe","charts","react","spectrum","visualization"],"latest_commit_sha":null,"homepage":"http://opensource.adobe.com/react-spectrum-charts/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-08-16T17:27:38.000Z","updated_at":"2026-04-14T20:48:50.000Z","dependencies_parsed_at":"2026-01-30T19:11:52.419Z","dependency_job_id":null,"html_url":"https://github.com/adobe/react-spectrum-charts","commit_stats":null,"previous_names":["adobe/react-spectrum-charts"],"tags_count":99,"template":false,"template_full_name":null,"purl":"pkg:github/adobe/react-spectrum-charts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Freact-spectrum-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Freact-spectrum-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Freact-spectrum-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Freact-spectrum-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe","download_url":"https://codeload.github.com/adobe/react-spectrum-charts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Freact-spectrum-charts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32063459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T11:35:06.609Z","status":"ssl_error","status_checked_at":"2026-04-20T11:34:48.899Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe","charts","react","spectrum","visualization"],"created_at":"2025-12-12T08:22:02.063Z","updated_at":"2026-04-20T20:04:10.667Z","avatar_url":"https://github.com/adobe.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Spectrum Charts\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/@adobe/react-spectrum-charts\" alt=\"Latest version\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@adobe/react-spectrum-charts.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/@adobe/react-spectrum-charts\" alt=\"Download count\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/@adobe/react-spectrum-charts?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/adobe/react-spectrum-charts/graphs/contributors\" alt=\"Contributors\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/contributors/adobe/react-spectrum-charts\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n![Scatter plot of penguin bill dimensions by species and body mass](https://github.com/adobe/react-spectrum-charts/wiki/images/penguins.png)\n\n## Documentation\n\n[React Spectrum Charts Docs](https://opensource.adobe.com/react-spectrum-charts/docs)\n\n## Table of Contents\n\n- [React Spectrum Charts](#react-spectrum-charts)\n  - [Table of Contents](#table-of-contents)\n  - [Overview](#overview)\n    - [Key Features:](#key-features)\n  - [Installation](#installation)\n    - [npm](#npm)\n    - [yarn](#yarn)\n  - [Usage](#usage)\n    - [Example](#example)\n  - [Spectrum (Adobe Design System) Integration](#spectrum-adobe-design-system-integration)\n  - [API](#api)\n  - [Storybook](#storybook)\n  - [Support](#support)\n  - [Contributing](#contributing)\n  - [License](#license)\n    - [Apache License 2.0 Summary](#apache-license-20-summary)\n  - [Roadmap](#roadmap)\n\n## Overview\n\n`react-spectrum-charts` is a declarative charting library for composing charts in React. It empowers you to effortlessly create visually stunning charts following Adobe's design system ([Spectrum](https://spectrum.adobe.com)) with minimal code. Understanding of the grammar of graphics or lower-level libraries like D3 or Vega is not needed.\n\n### Key Features:\n\n- **Intuitive**: Developer experience comes first in the API design. The declarative API removes the need to understand advanced data visualization concepts. The code reads just like you would explain the chart to someone else.\n\n- **Configurable**: The component-based building blocks enable you to build the chart that solves your use case. The modular design makes it easy to compose complex visualizations with simple, easy to understand code.\n\n- **Proven**: By leveraging Spectrum ([Adobe's Spectrum design system](https://spectrum.adobe.com/)) you get beautiful charts backed by research, user testing, and industry best practices.\n\n- **International**: Support for 30+ date/number locales so that your users can view their data in the format that they would expect.\n\n## Installation\n\n#### npm\n\n```bash\nnpm install @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite\n```\n\n#### yarn\n\n```bash\nyarn add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite\n```\n\n#### pnpm\n\n```bash\npnpm add @adobe/react-spectrum-charts @adobe/react-spectrum vega vega-lite\n```\n\n### Spectrum 2 (alpha)\n\nA separate alpha package provides Spectrum 2 support with additional features (line gradients, direct labels, interpolation, S2 reference lines):\n\n```bash\nyarn add @spectrum-charts/react-spectrum-charts-s2@alpha @adobe/react-spectrum vega vega-lite\n```\n\nSee the [Spectrum 2 docs](https://opensource.adobe.com/react-spectrum-charts/docs/spectrum2/overview) for details.\n\n## Usage\n\n`react-spectrum-charts` is designed in a way that makes composing charts similar to composing any other app content in JSX.\n\nEach chart is wrapped in the `\u003cChart/\u003e` component. The child components and their props control the contents of the chart.\n\n### Example\n\n```ts\nimport React from 'react';\nimport {Axis, Bar, Legend, Chart} from '@adobe/react-spectrum-charts';\n\nconst MyChart: FC\u003cMyChartProps\u003e = (props) =\u003e {\n    ...\n\n    return (\n        \u003cChart data={myChartData}\u003e\n            \u003cAxis position=\"bottom\" /\u003e\n            \u003cAxis position=\"left\" /\u003e\n            \u003cBar type=\"stacked\" color=\"series\" /\u003e\n            \u003cLegend /\u003e\n        \u003c/Chart\u003e\n    )\n}\n```\n\n## Spectrum (Adobe Design System) Integration\n\nAdobe's design system has detailed guidelines for charting fundamentals, color selection for charts as well as design guidelines for the primary chart components.\n\n`react-spectrum-charts` is the react implementation of these guidelines.\n\n- [Fundamentals](https://spectrum.adobe.com/page/data-visualization-fundamentals/)\n- [Color](https://spectrum.adobe.com/page/color-for-data-visualization/)\n- Components\n  - [Area](https://spectrum.adobe.com/page/area-chart/)\n  - [Bar](https://spectrum.adobe.com/page/bar-chart/)\n  - [Line](https://spectrum.adobe.com/page/line-chart/)\n\n## API\n\n[API Documentation](https://github.com/adobe/react-spectrum-charts/wiki)\n\n## Storybook\n\nThis library has an extensive [Storybook](http://opensource.adobe.com/react-spectrum-charts/) with stories for every component and most props. You can use the controls tab in storybook to alter component props and see how that alters the chart in real time.\n\nIt is also possible to view the source code for any story by selecting the \"Docs\" tab, scrolling to the desired story and then selecting \"Show code\". This is helpful for seeing the full API for any story in storybook.\n\nThe Storybook may contain components or props that are not released yet since it gets rebuilt with every push to main, not just with npm releases.\n\n## Support\n\nIf you encounter any issues, have questions, or need assistance with **react-spectrum-charts**, there are several ways to get support:\n\n1. **Documentation**: Check out the [official documentation](https://github.com/adobe/react-spectrum-charts/wiki) for examples, API documentation and developer docs.\n\n2. **GitHub Issues**: If you believe you've identified a bug or have a feature request or have general feedback, please review the list of [open issues](https://github.com/adobe/react-spectrum-charts/issues) to see if someone else has already submitted a similar issue that you can add to. If an issue doesn't exist, please submit a new issue using the correct template ([create a new issue](https://github.com/adobe/react-spectrum-charts/issues/new/choose)).\n\nPlease be respectful and considerate when seeking support. Provide as much context as possible when reporting issues, and follow any guidelines or templates specified in the GitHub issues section. Your feedback and contributions are highly valued.\n\n## Contributing\n\n[Contribution Guidelines](./CONTRIBUTING.md)\n\n## License\n\n**react-spectrum-charts** is open-source software released under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). You can find a copy of the license in the [LICENSE](LICENSE) file included with the project.\n\n### Apache License 2.0 Summary\n\n- **Permissions**: You are granted broad permissions to use, modify, distribute, and sublicense the software. You can use it for commercial purposes.\n\n- **Conditions**: You must include the original copyright notice and disclaimers. You cannot use trademarks of the project without proper attribution.\n\n- **Limitations**: The license is not a warranty, and the software is provided \"as is.\" The project's contributors are not liable for any damages.\n\n- **More Information**: For a full and detailed explanation of the Apache License 2.0, please refer to the [official license document](https://www.apache.org/licenses/LICENSE-2.0).\n\nBy using **react-spectrum-charts**, you agree to comply with the terms and conditions of the Apache License 2.0.\n\nPlease review the [LICENSE](LICENSE) file for the complete text of the license.\n\n## Roadmap\n\nThe roadmap for this project is tracked in github projects. You must be a member of the Adobe org to see the roadmap.\n\n[Roadmap](https://github.com/orgs/adobe/projects/46)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Freact-spectrum-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe%2Freact-spectrum-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Freact-spectrum-charts/lists"}