React Horizontal Heatmap

A lightweight React component for rendering a horizontal heatmap. Perfect for timelines, activity charts, contribution-style graphs, or health status indicators. Fully customizable colors, box size, and spacing.

🚀 Installation

npm install react-horizontal-heatmap
# or
yarn add react-horizontal-heatmap
# or
pnpm add react-horizontal-heatmap

📦 Usage

import React from 'react';
import { HorizontalHeatmap } from 'react-horizontal-heatmap';

export const App = () => {
	const data = [
		{
			value: 2,
			time: '2025-09-07 10:00',
			items: [
				{ icon: <FaUser />, text: 'New User', link: '#' },
				{ icon: <FaBug />, text: 'Error Reported', link: '#' },
			],
		},
		{
			value: 0,
			time: '2025-09-07 11:00',
			items: [],
		},
		{
			value: 1,
			time: '2025-09-07 12:00',
			items: [{ icon: <FaLink />, text: 'Server Linked', link: '#' }],
		},
	];

	return (
		<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
			<HorizontalHeatmap data={data} boxSize={30} gap={6} />
		</div>
	);
};

⚙️ Props

| Prop | Type | Default | Description | | ---------- | ---------- | --------------------------------------------------------- | --------------------------------------------- | | data | number[] | (required) | Array of values to visualize. | | maxValue | number | Math.max(...data) | Maximum value for color scaling. | | colors | string[] | ["#e0f7fa", "#80deea", "#26c6da", "#00acc1", "#006064"] | Array of hex colors used as gradient buckets. | | boxSize | number | 20 | Width & height of each square in pixels. | | gap | number | 2 | Gap (px) between boxes. |

🎨 Example with Custom Colors

<HorizontalHeatmap data={[2, 4, 8, 10, 6]} colors={['#f1f8e9', '#aed581', '#7cb342', '#33691e']} />

📊 Use Cases

• Server health timeline
• Activity trackers
• GitHub-style contribution graph (1 row)
• Resource usage visualization

🛠 Development

git clone https://github.com/sakthilkv/react-horizontal-heatmap.git
cd react-horizontal-heatmap
npm install
npm run build

📜 License

MIT © Sakthi LK