Skip to Content
ComponentsLine

Line Chart

A chart that connects data points with a line, useful for visualizing trends over time.

"use client"
 
import { Line, LineChart, CartesianGrid, XAxis } from "recharts"
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"
<ChartContainer config={chartConfig} className="h-64 w-full">
  <LineChart data={chartData}>
    <CartesianGrid vertical={false} />
    <XAxis dataKey="month" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Line dataKey="desktop" stroke="var(--color-desktop)" strokeWidth={2} dot={false} />
  </LineChart>
</ChartContainer>

Examples

With dots

<Line
  dataKey="desktop"
  stroke="var(--color-desktop)"
  strokeWidth={2}
  dot={{ r: 4 }}
  activeDot={{ r: 6 }}
/>

Linear interpolation

<Line type="linear" dataKey="desktop" ... />

Available type values: "basis", "bumpX", "bumpY", "bump", "linear", "monotone", "natural", "step", "stepAfter", "stepBefore".

Last updated on
BarArea