shadcn.io is not affiliated with official shadcn/ui
About
Use it when the data was measured at those months and nothing is known in between: a closing price, a monthly count, a reading. The smooth area looks softer but can bulge above or below the data. For values that hold flat between changes, use the step area.
Six monthly values are joined by straight lines with a 40% fill, so every corner is a data point. The tooltip leaves the month out and marks Desktop with a dot.
Installation
Usage
import { ChartAreaLinear } from "@/components/charts/chart-area-linear";<ChartAreaLinear />Customize
type="linear"on<Area>draws straight segments between points.<ChartTooltipContent hideLabel indicator="dot" />shows the row without the month.fillandstrokereadvar(--color-desktop)withfillOpacity={0.4}.<CartesianGrid vertical={false} />and an<XAxis>without line or ticks keep the frame quiet.
FAQ
When should I pick straight segments over a curve?
When people might read values between the labeled months, or when a curve's overshoot would mislead: finance, measurements, anything someone checks. A smooth curve can bulge above the highest point; straight segments never leave the data.
How do I switch it back to a smooth curve?
Set type="natural" on <Area>, or monotone for a curve that bends without overshooting any point.
How do I add a dot at each corner?
Set dot on <Area>, or activeDot for the hovered point only. The Line Chart with Dots shows the styling.
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
Area Chart
Area chartsOne series as a smooth filled curve over six months.
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 with Dots
Line chartsA line with a dot on every data point.
Area Chart with Axes
Area chartsStacked areas with both axes and their tick labels drawn.
Stacked Area Chart
Area chartsTwo series stacked into one total, each band its own color.