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)