shadcn.io is not affiliated with official shadcn/ui
About
Use it for values that stay put until something changes them: a seat count, a price, a stock level, a status. A sloped line would show a gradual change that never happened; a step shows the jump. For a filled version of the same idea, see the Step Area Chart.
Six monthly values drawn as flat runs joined by vertical jumps, each change halfway between two months. Grid lines sit behind it, the months below, and the tooltip shows the value alone.
Installation
Usage
import { ChartLineStep } from "@/components/charts/chart-line-step";<ChartLineStep />Customize
type="step"on<Line>draws the steps, changing value halfway between two months.stepAfterandstepBeforemove the jump to one end.dot={false}keeps the stroke clean;strokeandstrokeWidth={2}match the other line charts.<CartesianGrid vertical={false} />and an<XAxis>withtickLine={false}andaxisLine={false}keep the guides light.<ChartTooltipContent hideLabel />shows the value without the month.
FAQ
Where exactly does the line change value?
With type="step", halfway between two months. stepAfter holds each value until the next month's point, which suits prices and plans that change on a date; stepBefore jumps to the next value right after the current month.
When is a step line better than a sloped one?
When the value can't be in between. A price is $10 until it's $12, a team has 8 seats until it has 10. A sloped line would claim $11 halfway through the month. Keep sloped or curved lines for things that do change gradually, like traffic.
Can I fill the area under the steps?
Swap <Line> for <Area type="step"> inside an <AreaChart>, as the Step Area Chart does.
Why does the tooltip land on the months and not the jumps?
The tooltip follows the hovered month on the x axis. The step shape is only the path between points, so each tooltip is a real reading.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Step Area Chart
Area chartsA stepped area for values that change at fixed points.
Linear Line Chart
Line chartsStraight segments between points, no smoothing.
Line Chart
Line chartsOne series as a smooth line over six months.
Line Chart with Dots
Line chartsA line with a dot on every data point.
Bar Chart
Bar chartsOne series of rounded vertical bars, a month each.
Multiple Line Chart
Line chartsTwo series as lines on the same axes.