shadcn.io is an independent project built on shadcn/ui
One smooth curve of desktop visitors across six months, with no dots. Grid lines run horizontally. The tooltip shows the hovered month's count.
Use it for a trend where the shape matters more than each point. If people need the figures, put them in a Table. In React, Base UI does not draw the curve. You pass the months and the series color.
Installation
Anatomy
Usage
<div className="w-full max-w-xl rounded-md border bg-background p-4">
<ChartContainer config={chartConfig}>
<LineChart
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 />}
cursor={false}
/>
<Line
dataKey="desktop"
dot={false}
stroke="var(--color-desktop)"
strokeWidth={2}
type="natural"
/>
</LineChart>
</ChartContainer>
</div>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.
API Reference
Chart
Sets config={chartConfig} and hideLabel. The rest is on the Chart page.
