⏳ This skill is pending AI review.
Scores will appear once the review pipeline completes.
typescript
Write strongly-typed TypeScript code in Recharts
Choose how to use this skill
You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.
1. Native installer
This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.
Do not guess an installer command or replace an existing version without reviewing the diff.
2. Complete package recommended
Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.
No complete ProSkills package is published for this listing yet.3. Prompt-only
Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.
Need only the instruction file?
Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.
No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.
// RATINGS
Not yet listed on ClawHub or SkillsMP
// README
Recharts
Introduction
Recharts is a Redefined chart library built with React and D3.
The main purpose of this library is to help you to write charts in React applications without any pain. Main principles of Recharts are:
- Simply deploy with React components.
- Native SVG support, lightweight with minimal dependencies.
- Declarative components.
Documentation at recharts.github.io and our storybook
Also see the wiki.
All development is done on the main branch. The current latest release and storybook documentation reflects what is on the release branch.
Examples
<LineChart width={400} height={400} data={data}>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" />
<Line type="monotone" dataKey="pv" stroke="#387908" />
</LineChart>
All the components of Recharts are clearly separated. The LineChart is composed of x axis, tooltip, grid, and line items, and each of them is an independent React Component. The clear separation and composition of components is one of the principle Recharts follows.
Installation
npm
NPM is the easiest and fastest way to get started using Recharts. It is also the recommended installation method when building single-page applications (SPAs). It pairs nicely with a CommonJS module bundler such as Webpack.
# latest stable
$ npm install recharts react-is
react-is needs to match the version of your installed react package.
Deno
Deno is a drop-in replacement for npm, so Recharts installs the same way:
$ deno add recharts react-is
umd
The UMD build is also available on unpkg.com:
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-is@18/umd/react-is.production.min.js"></script>
<script src="https://unpkg.com/recharts/umd/Recharts.js"></script>
Then you can find the library on window.Recharts.
Contributing
Recharts is open source. If you want to contribute to the project, please read the CONTRIBUTING.md to understand how to contribute to the project and DEVELOPING.md to set up your development environment.
Thanks
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.
Thanks to JetBrains for providing OSS development license for their IDEs.
Browser testing via
License
Copyright (c) 2015-2026 Recharts Group.
// HOW IT'S BUILT
KEY FILES