Waffle chart

A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.

Library

Arc Library

Framework

React

Type

ui

License

MIT

Dependencies

motion

Install

npx shadcn@latest add https://uiarc.dev/r/waffle-chart.json

Files

• registry/components/waffle-chart/waffle-chart.tsx
• registry/components/waffle-chart/waffle-chart.module.css
• registry/motion-tokens.ts
• lib/motion-tokens.ts

Source

https://github.com/kuratlielia/arc-library

Categories

• Chart Components
• React Chart Components
• Animated Chart Components
• Data Display Components
• React Data Display Components
• Animated Data Display Components

More from Arc Library

• Activity heatmap
• Bar chart
• Brush chart
• Donut chart
• Gauge
• Line chart
• Ridgeline
• Slope chart
• Sparkline
• Streamgraph
• Treemap
• Usage meter