Interactive charts

A range toggle that reslices the series with React state, and a Recharts Brush for drag-to-zoom over a long time range. Both drive the same themed ChartContainer.

$bunx shadcn@latest add @nx-ui/chart
Registry item
Installs withutils

Range toggle

A segmented control switches the window between the last 7, 30 and 90 days; the area redraws from the sliced data.

Daily tonnage divertedLast 30 days

Brush to zoom

Drag the handles on the brush beneath the chart to zoom into any window of the full 90-day series.

API reference

Exported parts and their props, extracted from the component source.