shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart with step for React
A line chart with step interpolation, drawing flat runs and vertical jumps.
Use step lines for values that hold until they change, like prices, plan limits or stock levels. type="step" draws flat runs between months joined by vertical jumps, with no dots.
Preview
Installation
FAQ
How does the line get its staircase shape?
Line sets type to step. The stroke runs flat at each desktop value, then jumps vertically to the next month. dot is false, stroke is var(--color-desktop), and strokeWidth is 2.
Where does the stroke color come from?
config sets desktop to the label Desktop and color var(--chart-1). ChartContainer turns that into --color-desktop for the stroke.
How are the month ticks shortened?
XAxis uses dataKey month and tickFormatter set to formatMonth, the first three characters. axisLine and tickLine are false, tickMargin is 8, and the side margins are 12.
What is drawn behind the steps?
CartesianGrid sets vertical to false. LineChart sets accessibilityLayer, so the points can be reached from the keyboard.
Related
- A linear line chartA line chart joining its monthly values
- A line chartA line chart drawing one series as a
- A step area chartAn area chart with step interpolation
- A bar chartA bar chart with rounded corners
- A line chart with dotsA line chart with a dot on every data
- A multiple line chartA line chart comparing desktop and mobile