shadcn.io is not affiliated with official shadcn/ui
Chart examples · Area
A linear area chart for React
An area chart that joins its monthly values with straight lines instead of curves.
Use straight segments when a smooth curve would suggest values between the months that never happened. The area joins each month to the next with a straight edge, filled with the series color at 40% opacity.
Preview
Installation
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.
Related
- A simple area chartA single-series area chart with a smooth
- A step area chartAn area chart with step interpolation
- A line chartA line chart drawing one series as a
- A stacked area chartAn area chart stacking desktop and mobile
- A bar chartA bar chart with rounded corners
- An area chart with axesA stacked area chart with a Y axis