Shadcn UI Chart Card Block
ChartCard25 is an area chart with a horizontal reference line indicating a target value. The data line shows actual values over time while the dashed reference line shows the benchmark. A label on the right identifies the target value.
Light card surface with a gradient-filled area chart. The reference line uses a dashed pattern in a contrasting color to distinguish it from the data. The label is positioned at the right edge of the chart area. Standard horizontal grid lines provide additional reference. The area fill helps visualize whether values are above or below target.
Adding a target line to a chart provides immediate context for whether performance is meeting expectations. Viewers can instantly see which periods exceeded the target and which fell short. This pattern is useful for quota tracking, SLA monitoring, or any metric with a known benchmark.
The target value is configurable via props. The reference line scales correctly regardless of the data range.
Dependencies
| Package | Type |
|---|---|
| recharts | NPM |
| react | NPM |
card @shadcn | Registry |
chart @shadcn | Registry |