## π Getting Started
```bash
$ bun add @lobehub/charts
```
`@lobehub/ui` (v6), `react` and `react-dom` (v19) are peer dependencies; install them too if your project does not have them yet. The package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c).
```tsx
import { LineChart } from '@lobehub/charts';
const data = [
{ date: 'Jan 22', Inverters: 2338, SolarPanels: 2890 },
{ date: 'Feb 22', Inverters: 2103, SolarPanels: 2756 },
{ date: 'Mar 22', Inverters: 2194, SolarPanels: 3322 },
];
// `index` is the x-axis key, `categories` are the series to plot
export default () => (
);
```
See the [documents](https://charts.lobehub.com) for every component, live demos and props.
[![][back-to-top]](#readme-top)
## π€ AI-Powered Development
Lobe Charts publishes agent-readable docs, generated from the same source as the documentation site.
| Resource | What it is | How to use it |
| ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| **Agent Skill** - [`skills.md`][skills-md-link] | Skill entry point: setup, a recommended workflow and an index of every component page | Give the URL to your agent (Cursor, Claude Code, Codex, ...), or save it as a `SKILL.md` in your agent's skills folder |
| **llms.txt** - [`llms.txt`][llms-txt-link] | [llms.txt](https://llmstxt.org/) index of every docs page | Point any llms.txt-aware tool at it |
| **Component reference** - `https://charts.lobehub.com/skills/components/.md` | Markdown page for one component, e.g. [`line-chart.md`](https://charts.lobehub.com/skills/components/line-chart.md) | Fetch it before writing code with that component |
Works with **Cursor**, **Claude Code**, **Codex**, **Windsurf**, **GitHub Copilot** and any tool that can read a URL or `llms.txt`. Copy-paste prompt:
```text
Use @lobehub/charts. Read https://charts.lobehub.com/skills.md first,
then fetch the reference page of each component you use before writing code.
```
> \[!NOTE]\
> There is no MCP server or skill install CLI yet; `skills.md` and `llms.txt` are the agent entry points.
[![][back-to-top]](#readme-top)
## π Documentation
- **Docs & live demos**: [charts.lobehub.com](https://charts.lobehub.com) - line, area, bar, composed, donut / pie, funnel, scatter, radar, sparklines, heatmaps, trackers, benchmark charts and more
- **Changelog**: [CHANGELOG.md](./CHANGELOG.md)
[![][back-to-top]](#readme-top)
## β¨οΈ Local Development
```bash
$ git clone https://github.com/lobehub/lobe-charts.git
$ cd lobe-charts
$ bun install
$ bun start
```
[![][back-to-top]](#readme-top)
## π€ Contributing
Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub [Issues][github-issues-link] to get stuck in to show us what youβre made of.
[![][pr-welcome-shield]][pr-welcome-link]
[![][contributors-contrib]][contributors-link]
