lobehub
Lobe Charts
React modern charts components built on recharts
Documents · Changelog · Report Bug · Request Feature
TOC
#
✨ Features
- <input checked="" disabled="" type="checkbox"> Line Chart
- <input checked="" disabled="" type="checkbox"> Area Chart
- <input checked="" disabled="" type="checkbox"> Bar Chart
- <input checked="" disabled="" type="checkbox"> Donut Chart
- <input checked="" disabled="" type="checkbox"> Funnel Chart
- <input checked="" disabled="" type="checkbox"> Scatter Chart
- <input checked="" disabled="" type="checkbox"> Spark Chart
- <input checked="" disabled="" type="checkbox"> Heatmaps
- <input checked="" disabled="" type="checkbox"> Data List
- <input checked="" disabled="" type="checkbox"> Tracker
- <input checked="" disabled="" type="checkbox"> Legend
📦 Installation
[!IMPORTANT]\ This package is ESM only.
To install Lobe UI, run the following command:
$ bun add @lobehub/chartsCompile with NextJS
[!NOTE]\ By work correct with nextjs ssr, add
transpilePackages: ['@lobehub/charts']tonext.config.js. For example:
// next.config.js
const nextConfig = {
// ...other config
transpilePackages: ['@lobehub/charts'],
};⌨️ Local Development
You can use Github Codespaces for online development:
Or clone it for 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.
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
</picture>
🔗 Links
Credits
- recharts - https://github.com/recharts/recharts
- tremor - https://github.com/tremorlabs/tremor
- react-activity-calendar - https://github.com/grubersjoe/react-activity-calendar
More Products
- 🤯 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.
Design Resources
- 🍭 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
Development Resources
- 🎤 Lobe TTS - A high-quality & reliable TTS/STT library for Server and Browser
- 🌏 Lobe i18n - Automation ai tool for the i18n (internationalization) translation process.
📝 License
</summary>