Shadcn UI Chart Card Block
ChartCard7 is an area chart card with a summary footer below the chart. The layout includes a header with title and date range, an area chart in the middle, and a footer with trend indicator showing percentage change and descriptive text.
Light card surface with the chart using a hidden Y-axis for a cleaner look. The footer uses the card footer component with a green trend indicator and muted helper text. The chart is slightly shorter than other chart cards to accommodate the footer. The gradient fill creates visual depth.
This card provides both visual trend data and a quick numeric summary without requiring users to interpret the chart. The footer acts as a caption explaining what the chart shows. Useful when you want to highlight a specific insight alongside the visualization. A more complete widget than a chart alone.
The footer is always visible below the chart. The trend indicator uses semantic coloring matching other stats cards in the library.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| lucide-react | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |