lobehub/lobe-charts

💡 Why Lobe Charts?

Lobe Charts (@lobehub/charts) is a React chart library for dashboards and AI products, built on recharts and designed to fit Lobe UI apps.

• Everything a dashboard needs - business charts, sparklines, heatmaps and status trackers in one package
• Made for AI products - ready-made charts for model benchmarks and leaderboards, with your own brand icons
• Fits your Lobe UI app - charts follow the Lobe UI theme, so they look consistent without extra styling
• Simple, data-first props - pass an array of objects and choose which keys to plot
• Fully typed - TypeScript types for every component
• Agent-ready - coding agents can learn the library from skills.md and llms.txt

🚀 Getting Started

$ 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.

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 for every component, live demos and props.

🤖 AI-Powered Development

Lobe Charts publishes agent-readable docs, generated from the same source as the documentation site.

Works with Cursor, Claude Code, Codex, Windsurf, GitHub Copilot and any tool that can read a URL or llms.txt. Copy-paste prompt:

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.

📖 Documentation

• Docs & live demos: charts.lobehub.com - line, area, bar, composed, donut / pie, funnel, scatter, radar, sparklines, heatmaps, trackers, benchmark charts and more
• Changelog: CHANGELOG.md

⌨️ Local Development

$ git clone https://github.com/lobehub/lobe-charts.git
$ cd lobe-charts
$ bun install
$ bun start

🤝 Contributing

Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.

🩷 Sponsor

Every bit counts and your one-time donation sparkles in our galaxy of support! You’re a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.

🔗 Links

• 🍭 Lobe UI - React component library for AI applications
• 🥨 Lobe Icons - AI / LLM brand logo and icon library
• 📊 Lobe Charts - React chart component library
• ✒️ Lobe Editor - Lexical-based rich text editor for React, with Markdown, plugins and a chat composer
• 🎤 Lobe TTS - TTS / STT speech library
• 📐 Lobe Lint - ESLint, Prettier, Stylelint, Commitlint and more lint configs
• 😀 Fluent Emoji - Fluent Emoji asset library

Credits

• recharts -
• tremor -
• react-activity-calendar -

---

Copyright © 2023 LobeHub. This project is MIT licensed.