shadcn.io is an independent project built on shadcn/ui
Six months of desktop visitors, joined by straight edges and filled with the series color at partial strength. Nothing is curved between the points.
Use straight edges when a curve would suggest values between months that were never measured. A step fits values that hold flat. For the numbers, use a Table. In React, Base UI does not choose the straight edges. You set the area type.
Installation
Anatomy
Usage
<div className="w-full max-w-xl rounded-md border bg-background p-4">
<ChartContainer config={chartConfig}>
<AreaChart
accessibilityLayer
data={chartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
axisLine={false}
dataKey="month"
tickFormatter={formatMonth}
tickLine={false}
tickMargin={8}
/>
<ChartTooltip
content={<ChartTooltipContent hideLabel indicator="dot" />}
cursor={false}
/>
<Area
dataKey="desktop"
fill="var(--color-desktop)"
fillOpacity={0.4}
stroke="var(--color-desktop)"
type="linear"
/>
</AreaChart>
</ChartContainer>
</div>FAQ
How are the edges straight?
Area sets type to linear, so each month joins the next with a straight segment. dataKey is desktop, stroke and fill are var(--color-desktop), and fillOpacity is 0.4.
Where does the fill color come from?
config gives desktop the label Desktop and color var(--chart-1). ChartContainer exposes it as --color-desktop, which both fill and stroke use.
How are the months abbreviated?
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 grid is behind the area?
CartesianGrid sets vertical to false. AreaChart sets accessibilityLayer, so the points can be reached from the keyboard.
API Reference
Chart
Sets config={chartConfig}, hideLabel and indicator="dot". The rest is on the Chart page.
