Charts
Where to Use Contributions in React Apps
Contributions is a GitHub-style activity grid for calendar year or last 7 days, with level legend, range select, and hover tooltips. Developer and habit products ship it when sparse daily activity should remain readable at a glance.
Where teams use Contributions
Use case 1
Developer profile activity
Show commits, reviews, or deploys on a year grid. Tooltips explain counts without leaving the heatmap.
Use case 2
Habit consistency calendar
Wellness apps map check-ins to contribution levels. Last-7-days range suits mobile weekly reviews.
Use case 3
Support agent productivity
CX leaders view tickets closed per day with the same visual language engineers already know. Legend clarifies intensity bands.
Use case 4
Content publishing cadence
Editorial teams track posts and updates on the grid. Range select flips between annual planning and weekly sprints.
Who it is for
Product engineers visualizing sparse daily activity with a familiar contribution grid.
Try Contributions on AkmanOS
Toggle year versus 7-day ranges and hover cells in the preview, then bring the markdown into your AI coding tool to bind Contributions to your activity feed.
Preview /preview/contributions-chartMore in Charts
- Active Users HeatmapActive users by hour and calendar day—live now online, orange activity matrix, 7/14/30-day ranges, and single-day drill-down. Explore real product surfaces for the Active Users Heatmap component — then open the live AkmanOS preview and copy production-ready source.
- Bar ChartGrouped session bars by channel — organic, paid, and referral — with date presets, live signals, hover drill-down, and growth badge. Explore real product surfaces for the Bar Chart component — then open the live AkmanOS preview and copy production-ready source.
- Funnel ChartHorizontal sign-up funnel — tapered segments with glow edges, conversion badges, growth metric, and stage legend. Explore real product surfaces for the Funnel Chart component — then open the live AkmanOS preview and copy production-ready source.
- Revenue ChartStacked subscription, one-time, and refunds with average revenue line and currency formatting. Explore real product surfaces for the Revenue Chart component — then open the live AkmanOS preview and copy production-ready source.