shadcn.io is not affiliated with official shadcn/ui
Chart examples · Line
A line chart for React
A line chart drawing one series as a smooth curve across six months.
The starting point for showing a trend over time. One series is drawn as a smooth natural curve across six months, without dots, over horizontal grid lines; the tooltip shows the hovered month's value.
Preview
Installation
FAQ
How does the line curve between months?
Line sets type to natural, so the stroke bends through the desktop points. dot is false, stroke is var(--color-desktop), and strokeWidth is 2.
Where does the stroke color come from?
config gives desktop the label Desktop and color var(--chart-1). ChartContainer exposes that as --color-desktop, which Line uses for stroke.
How are the month ticks shortened?
XAxis uses dataKey month and tickFormatter set to formatMonth, which keeps the first three characters. axisLine and tickLine are false, and tickMargin is 8.
What are the side margins for?
LineChart sets margin to 12 on the left and right, so the curve doesn't sit on the frame edge. CartesianGrid sets vertical to false.
Related
- A line chart with dotsA line chart with a dot on every data
- A linear line chartA line chart joining its monthly values
- A multiple line chartA line chart comparing desktop and mobile
- A simple area chartA single-series area chart with a smooth
- A bar chartA bar chart with rounded corners
- A line chart with stepA line chart with step interpolation