Component

Line Chart

Smooth line chart with dot markers for two series. Best for showing trends and changes over time.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/chart-line-dots

Usage

Use line charts to visualize how metrics change over a continuous range, such as daily signups or monthly revenue.

Composition

Card

Playground

Preview

Line Chart - Dots

January - June 2024

Trending up by 5.2% this month

Showing total visitors for the last 6 months

Configure

Title

Date range

Metric 1 label

Metric 2 label

Code

const chartData = [
  { month: "January", desktop: 186, mobile: 80 },
  { month: "February", desktop: 305, mobile: 200 },
  { month: "March", desktop: 237, mobile: 120 },
  { month: "April", desktop: 73, mobile: 190 },
  { month: "May", desktop: 209, mobile: 130 },
  { month: "June", desktop: 214, mobile: 140 },
]

const chartConfig = {
  desktop: { label: "Desktop", color: "var(--chart-1)" },
  mobile:  { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig

<Card>
  <CardHeader>
    <CardTitle>Line Chart - Dots</CardTitle>
    <CardDescription>January - June 2024</CardDescription>
  </CardHeader>
  <CardContent>
    <ChartContainer config={chartConfig}>
      <LineChart accessibilityLayer data={chartData} margin={{ left: 12, right: 12 }}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
        <Line
          dataKey="desktop"
          type="natural"
          stroke="var(--color-desktop)"
          strokeWidth={2}
          dot={{ fill: "var(--color-desktop)" }}
          activeDot={{ r: 6 }}
        />
        <Line
          dataKey="mobile"
          type="natural"
          stroke="var(--color-mobile)"
          strokeWidth={2}
          strokeDasharray="4 4"
          dot={{ fill: "var(--color-mobile)" }}
          activeDot={{ r: 6 }}
        />
        <ChartLegend content={<ChartLegendContent />} />
      </LineChart>
    </ChartContainer>
  </CardContent>
  <CardFooter className="flex-col items-start gap-2 text-sm">
    <div className="flex gap-2 leading-none font-medium">
      Trending up by 5.2% this month <TrendUp className="size-4" />
    </div>
    <div className="leading-none text-muted-foreground">
      Showing total visitors for the last 6 months
    </div>
  </CardFooter>
</Card>

Do

Use dot markers to make individual data points easy to tap or hover
Use a natural curve (type="natural") for smoother visual flow

Don't

Don't use a line chart for unordered categories, use a bar chart instead
Don't plot too many series on one chart without a legend