Shadcn.io is not affiliated with official shadcn/ui
React Step Line Chart
Line chart with step interpolation for discrete value changes
React Step Line Chart preview
Some values don't flow—they jump. This React line chart uses type="step" to draw staircase patterns instead of curves or straight lines. The value stays flat until the next data point, then jumps vertically. This honestly represents data that changes in discrete steps rather than smooth transitions. Built with Recharts and shadcn/ui, step charts are perfect for pricing tiers, subscription counts, inventory levels, or any Next.js dashboard showing metrics that hold steady then suddenly change—like plan upgrades or stock quantities.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this chart for you — no copy-paste, no CLI:
use shadcnio to install the line-step chart into my projectRelated Components
Step Area Chart
Add fill under step line
Linear Line Chart
Straight lines between points
Simple Line Chart
Smooth curved version
Simple Bar Chart
Discrete values as bars
Line Chart with Dots
Add markers to steps
Multiple Line Chart
Multiple step series
FAQ
Was this page helpful?
Sign in to leave feedback.