React Calendar Heatmap Chart
An effective and customizable calendar heatmap chart for React applications. This library helps you create a calendar heatmap, similar to Kite (Zerodha), Angel One, TradingView, but with additional powerful features:
- 🔀 Customizable date option
- 🗓️ Full control over layout and UI
- 🖥️ Plugin system for extended functionality
- ⚡ Lightweight with high speed
- ✅ Supports dynamic data updates
- ♾️ And many more...
🎮 Try it Out
Check out the live demo on CodeSandbox:
🔗 Live Demo
📦 Installation
Install via npm or yarn:
npm install react-calendar-heatmap-chart
# or
yarn add react-calendar-heatmap-chart
📸 Outputs
Light Mode:
Dark Mode:
Props
Prop | Type | Description |
---|---|---|
data |
Array | Array of objects containing date (YYYY-MM-DD) and net_profit_loss values. |
displayDate |
Boolean | If true , the date will be displayed on hover. |
mode |
String | Theme mode, can be "light" or "dark" . Defaults to "light" . |
bgColor |
String | Background color of the heatmap. Accepts any valid CSS color value. |
🚀 Usage
import { HeatmapCalendarChart } from "react-calendar-heatmap-chart";
export default function Heatmap() {
const data = [
{ date: "2025-01-06", net_profit_loss: -78 },
{ date: "2025-01-09", net_profit_loss: 79 },
{ date: "2025-01-27", net_profit_loss: -73 },
{ date: "2025-01-26", net_profit_loss: 82 },
{ date: "2025-01-08", net_profit_loss: 70 },
{ date: "2025-02-24", net_profit_loss: 58 },
{ date: "2025-02-08", net_profit_loss: -81 },
{ date: "2025-02-28", net_profit_loss: 16 },
{ date: "2025-02-04", net_profit_loss: 75 },
{ date: "2025-02-17", net_profit_loss: 15 },
];
return (
<HeatmapCalendarChart
mode="dark"
data={data}
displayDate={true}
bgColor={"#28243D"}
/>
);
}
📜 License
This project is licensed under the MIT License.
🏗️ Repository
🤝 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check issues and make pull requests.
📬 Reach Out to Me
If you have any questions, need clarification, or want to discuss something related to the project, feel free to reach out:
- Email: jenishgojariya@gmail.com
- LinkedIn: Jenish Gojariya
- GitHub: jenishgojariya