✨ Features

- [x] Line Chart
- [x] Area Chart
- [x] Bar Chart
- [x] Donut Chart
- [x] Funnel Chart
- [x] Scatter Chart
- [x] Spark Chart
- [x] Heatmaps
- [x] Data List
- [x] Tracker
- [x] Legend

📦 Installation

> \[!IMPORTANT]\
> This package is ESM only.

To install Lobe UI, run the following command:

[![][bun-shield]][bun-link]

``bash
$ bun add @lobehub/charts
`

$3

> \[!NOTE]\
> By work correct with nextjs ssr, add transpilePackages: ['@lobehub/charts'] to next.config.js. For example:

`js
// next.config.js
const nextConfig = {
// ...other config

transpilePackages: ['@lobehub/charts'],
};
`

⌨️ Local Development

You can use Github Codespaces for online development:

[![][codespaces-shield]][codespaces-link]

Or clone it for local development:

`bash
$ 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][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]

🩷 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

$3

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

$3

- 🤯 Lobe Chat - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
- 🅰️ Lobe Theme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
- 🧸 Lobe Vidol - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.

$3

- 🍭 Lobe UI - An open-source UI component library for building AIGC web apps.
- 🥨 Lobe Icons - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
- 📊 Lobe Charts - React modern charts components built on recharts

$3

- 🎤 Lobe TTS - A high-quality & reliable TTS/STT library for Server and Browser
- 🌏 Lobe i18n - Automation ai tool for the i18n (internationalization) translation process.

More Resources

---

Copyright © 2023 [LobeHub][profile-link].

This project is MIT licensed.

[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
[bun-link]: https://bun.sh
[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
[codespaces-link]: https://codespaces.new/lobehub/lobe-charts
[codespaces-shield]: https://github.com/codespaces/badge.svg
[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-charts
[contributors-link]: https://github.com/lobehub/lobe-charts/graphs/contributors
[discord-link]: https://discord.gg/AYFPHvv2jT
[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-charts
[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-charts.svg?type=large
[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-charts/release.yml
[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-charts/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-charts/test.yml
[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-charts/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
[github-contributors-link]: https://github.com/lobehub/lobe-charts/graphs/contributors
[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-charts?color=c4f042&labelColor=black&style=flat-square
[github-forks-link]: https://github.com/lobehub/lobe-charts/network/members
[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-charts?color=8ae8ff&labelColor=black&style=flat-square
[github-issues-link]: https://github.com/lobehub/lobe-charts/issues
[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-charts?color=ff80eb&labelColor=black&style=flat-square
[github-license-link]: https://github.com/lobehub/lobe-charts/blob/master/LICENSE
[github-license-shield]: https://img.shields.io/github/license/lobehub/lobe-charts?color=white&labelColor=black&style=flat-square
[github-releasedate-link]: https://github.com/lobehub/lobe-charts/releases
[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-charts?labelColor=black&style=flat-square
[github-stars-link]: https://github.com/lobehub/lobe-charts/network/stargazers
[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-charts?color=ffcb47&labelColor=black&style=flat-square
[npm-downloads-link]: https://www.npmjs.com/package/@lobehub/charts
[npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/charts?labelColor=black&style=flat-square
[npm-release-link]: https://www.npmjs.com/package/@lobehub/charts
[npm-release-shield]: https://img.shields.io/npm/v/@lobehub/charts?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
[profile-link]: https://github.com/lobehub
[vercel-link]: https://charts.lobehub.com
[vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com