react-calendar-heatmap-chart
Advanced tools
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.
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:
Check out the live demo on CodeSandbox:
🔗 Live Demo
Install via npm or yarn:
npm install react-calendar-heatmap-chart
# or
yarn add react-calendar-heatmap-chart
| 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. |
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"}
/>
);
}
This project is licensed under the MIT License.
Contributions, issues, and feature requests are welcome! Feel free to check issues and make pull requests.
If you have any questions, need clarification, or want to discuss something related to the project, feel free to reach out:
FAQs
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.
The npm package react-calendar-heatmap-chart receives a total of 9 weekly downloads. As such, react-calendar-heatmap-chart popularity was classified as not popular.
We found that react-calendar-heatmap-chart demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Bun 1.2.19 introduces isolated installs for smoother monorepo workflows, along with performance boosts, new tooling, and key compatibility fixes.
Security News
Popular npm packages like eslint-config-prettier were compromised after a phishing attack stole a maintainer’s token, spreading malicious updates.
Security News
/Research
A phishing attack targeted developers using a typosquatted npm domain (npnjs.com) to steal credentials via fake login pages - watch out for similar scams.