shadcn.io is not affiliated with official shadcn/ui
About
Use it for values that hold until they change: prices, plan counts, stock levels, a rate set once a month. A smooth curve would suggest a gradual change between months that never happened. For a measure that really moves, the smooth or linear area fits better.
One series is drawn as flat runs joined by vertical jumps, with a 40% fill. The tooltip leaves the month out and marks the row with an activity icon from the chart's config.
Installation
Usage
import { ChartAreaStep } from "@/components/charts/chart-area-step";<ChartAreaStep />Customize
type="step"on<Area>draws the steps.stepAfterandstepBeforemove the jump to the next point or onto the point.chartConfig.desktop.iconisActivity;ChartTooltipContentrenders it in place of the indicator.<ChartTooltipContent hideLabel />shows the series row without the month.fillandstrokereadvar(--color-desktop)withfillOpacity={0.4}.
FAQ
Where does each step happen?
type="step" jumps halfway between two points. stepAfter holds each value until the next point, and stepBefore jumps at the point itself.
Where does the icon in the tooltip come from?
From chartConfig.desktop.icon, lucide's Activity. When a config entry has an icon, ChartTooltipContent draws it where the color mark would go. Remove icon to get the colored dot back.
Why doesn't the tooltip name the month?
<ChartTooltipContent hideLabel />. Remove hideLabel to show the month above the row.
When is a step area better than a curve?
When the value is set rather than measured: a price, a quota, a headcount. The flat runs say nothing changed between updates. For values that drift between samples, the smooth curve or straight segments are more honest.
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 Line Chart
Line chartsA stepped line for values that hold until they change.
Linear Area Chart
Area chartsStraight segments between points, no curve smoothing.
Area Chart
Area chartsOne series as a smooth filled curve over six months.
Bar Chart
Bar chartsOne series of rounded vertical bars, a month each.
Line Chart with Dots
Line chartsA line with a dot on every data point.
Stacked Area Chart
Area chartsTwo series stacked into one total, each band its own color.