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)