Chart
Token-aware Recharts primitives and production-ready recipes for every shadcn chart family.
Inventory velocity
Stacked gradient · legend · axes
Channel share
Expanded stack · linear curves · formatted tooltip
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { ChartContainer } from "@carsxe/design-system/components/chart"Usage
tsx
import { ChartContainer, type ChartConfig } from "@carsxe/design-system/components/chart"
import { Area, AreaChart } from "recharts"Interactive chart
Interactive inventory
Series selector · active tooltip · live labels
Bar charts
Sales channels
Horizontal · labels · mixed values
Monthly throughput
Multiple · stacked · active tooltip
Market movement
Positive and negative values · zero baseline
Line charts
Valuation signals
Multiple · dots · custom colors
Service events
Step curve · inline labels · hidden indicator
Pie and donut charts
Lead sources
Donut · center text · legend
Channel concentration
Active shape · nested rings · custom labels
Radar charts
Inspection profile
Circular grid · dots · custom labels
Fleet benchmark
Multiple · filled grid · legend
Radial charts
Report completion
Radial grid · labels · stacked arcs
Verified records
Single shape · center value · compact radial
API Reference
| Prop | Type | Default |
|---|---|---|
| config | ChartConfig | — |
| initialDimension | { width: number; height: number } | { width: 320, height: 200 } |
| children | ReactElement | — |