Shadcn UI Chart Group Block
ChartGroup8 is a bento-style grid with four chart cards of varying sizes. The layout uses a three-column grid with some cards spanning two columns. Charts include an area chart, donut chart, horizontal bar chart, and vertical bar chart, each showing different aspects of the data.
Light card surfaces with each chart using distinct colors from the palette. The larger cards span two columns on desktop creating visual hierarchy. Chart heights are adjusted to create a balanced grid. The donut chart includes a compact legend below. Different chart types add visual variety while maintaining consistent styling.
This layout demonstrates a complete data view in a single section. The mixed chart types and varying card sizes create visual interest while the consistent styling maintains cohesion. The bento grid pattern is modern and efficient, showing multiple data dimensions without overwhelming.
The grid is responsive, collapsing to two columns on tablet and single column on mobile. Card spanning adjusts at each breakpoint to maintain readability.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |