DEV Community

Cover image for Build Activity Heatmaps in React with Horizontal Layout
jQueryScript
jQueryScript

Posted on

Build Activity Heatmaps in React with Horizontal Layout

React Horizontal Heatmap: A focused component for rendering single-row activity visualizations in your React apps.

Features:

📦 Simple data structure with values, timestamps, and tooltip items

🎨 Custom color gradients to match your design system

📏 Adjustable box dimensions and spacing

🔢 Automatic value-to-color scaling

⏱️ Built-in tooltip support with icons and links

Perfect for system monitors, activity trackers, or any interface where you need to show temporal patterns without pulling in a heavy charting library.

The API takes an array of objects and handles the rest.

👉 Blog Post

👉 GitHub Repo

Top comments (0)