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

🔗 GitHub 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: [email protected]
• LinkedIn: Jenish Gojariya
• GitHub: jenishgojariya