shadcn.io is not affiliated with official shadcn/ui
About
Pick it when the question is direction: is the metric going up, down or nowhere. A line uses less ink than an area, so it suits small cards and pages with several charts. Add the dots version when each month is a reading people should see, or a bar chart when they compare months.
A smooth curve runs through six monthly values, with horizontal grid lines behind it and three-letter months underneath. There's no value axis and no fill, and the tooltip shows the value without the month above it.
Installation
Usage
import { ChartLineSimple } from "@/components/charts/chart-line-simple";<ChartLineSimple />Customize
<LineChart data={chartData}>holds the rows and<Line dataKey="desktop">draws the series against<XAxis dataKey="month">.type="natural"smooths the line anddot={false}leaves only the stroke,strokeWidth={2}invar(--color-desktop).<CartesianGrid vertical={false} />keeps horizontal guides only. There's no<YAxis>, so the line spans the width between the 12px margins.<ChartTooltipContent hideLabel />drops the month from the tooltip, andcursor={false}turns off the hover cursor.
FAQ
How do I make the line thicker or dashed?
strokeWidth on <Line> sets the weight, 2 here, and strokeDasharray="4 4" dashes it, a common way to set a forecast apart from measured months.
Should I use this or the area chart?
Use the line when the direction matters and the chart sits next to others: it adds the least ink. Use the area when the amount matters, since the fill reads as volume. Both take the same rows, so switching means swapping <LineChart> and <Line> for <AreaChart> and <Area>.
Why doesn't the tooltip show the month?
<ChartTooltipContent hideLabel /> hides it, as shadcn/ui's example does: the month is already printed under the point. Remove hideLabel and the tooltip shows the month above the value.
How do I plot dates instead of month names?
Put a date string in each row, set <XAxis dataKey="date"> and format the ticks with tickFormatter, as the interactive line chart does. minTickGap stops the labels from crowding.
API Reference
ChartContainer
configChartConfig
Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.
initialDimension?{ height: number; width: number; }
The size it renders at before it's measured, so the first paint isn't * empty.
- Type
{ height: number; width: number; }- Default
INITIAL_DIMENSION
className?string
Merged with the part's classes.
ChartLegend
ChartLegendContent
<div>
hideIcon?boolean
Hides each series' icon (from config), leaving its color swatch.
- Default
false
nameKey?string
The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.
className?string
Merged with the part's classes.
ChartStyle
<style>
configChartConfig
The chart config whose colors it writes as --color-<key> variables.
idstring
The element's id.
ChartTooltip
ChartTooltipContent
<div>
hideIndicator?boolean
Hides each item's color indicator.
- Default
false
hideLabel?boolean
Hides the tooltip's label, the hovered point's.
- Default
false
indicator?"dashed" | "dot" | "line"
The color indicator's shape: a dot, a line or dashed.
- Type
"dashed" | "dot" | "line"- Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode
Formats the tooltip's label; its value is untyped, as in recharts 3.8.
- Type
(label: any, payload: TooltipPayload) → React.ReactNode- Parameters
label– anypayload– TooltipPayload- Returns
React.ReactNode
labelKey?string
The key in the data to read the label from, looked up in config.
nameKey?string
The key in each item's data to look its name up by in config.
className?string
Merged with the part's classes.
Related
Linear Line Chart
Line chartsStraight segments between points, no smoothing.
Line Chart with Dots
Line chartsA line with a dot on every data point.
Multiple Line Chart
Line chartsTwo series as lines on the same axes.
Area Chart
Area chartsOne series as a smooth filled curve over six months.
Bar Chart
Bar chartsOne series of rounded vertical bars, a month each.
Step Line Chart
Line chartsA stepped line for values that hold until they change.