shadcn.io is an independent project built on shadcn/ui
Desktop visitors across six months, joined with straight segments. Every change of direction is a corner. There are no dots.
Use straight segments when the line should pass through each month and nowhere else. A step line fits values that hold flat. For the numbers themselves, use a Table. In React, Ark UI does not pick straight segments. You set this one to linear.
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={renderTooltipContent} cursor={false} />
<Line
dataKey="desktop"
dot={false}
stroke="var(--color-desktop)"
strokeWidth={2}
type="linear"
/>
</LineChart>
</ChartContainer>
</div>FAQ
How are the segments straight?
Line sets type to linear, so each desktop value connects to the next with a straight stroke. dot is false, stroke is var(--color-desktop), and strokeWidth is 2.
Where does the line color come from?
config sets desktop to the label Desktop and color var(--chart-1). ChartContainer writes --color-desktop for the stroke.
How are the month ticks shortened?
XAxis uses dataKey month and tickFormatter set to formatMonth, which returns 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. CartesianGrid sets vertical to false, and LineChart sets accessibilityLayer.
API Reference
Chart
Sets config={chartConfig}, content={renderTooltipContent} and cursor={false}. The rest is on the Chart page.
