Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

A line chart with a label for React

A smooth desktop line, a dot on each month, and the value printed above the dot, with room so the highest label stays visible.

A smooth desktop line, a dot on each month, and the value printed above the dot. Extra space at the top keeps the highest label visible.

Use it when the chart has to be readable without a hover. Once there are more points than fit as labels, use a Table. In React, Base UI does not place the numbers above the dots. They come from the row.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Chart anatomy: container, grid, axis, bar, tooltip, legend

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,
        top: 20,
      }}
    >
      <CartesianGrid vertical={false} />
      <XAxis
        axisLine={false}
        dataKey="month"
        tickFormatter={formatMonth}
        tickLine={false}
        tickMargin={8}
      />
      <ChartTooltip
        content={<ChartTooltipContent indicator="line" />}
        cursor={false}
      />
      <Line
        activeDot={{
          r: 6,
        }}
        dataKey="desktop"
        dot={{
          fill: "var(--color-desktop)",
        }}
{/* The rest of the file is under Installation. */}

FAQ

How is the number printed above each point?

Line wraps a LabelList with position top, offset 12, fontSize 12, and className fill-foreground. The list has no dataKey, so the text is the line's desktop value.

Why is there room above the line?

LineChart sets margin to { top: 20, left: 12, right: 12 }. The top inset keeps labels such as February's 305 inside the container.

How are the dots drawn?

Line sets dot to an object whose fill is var(--color-desktop), and activeDot to { r: 6 }. type is natural, stroke is var(--color-desktop), and strokeWidth is 2.

How are the months abbreviated?

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 does the tooltip show?

ChartTooltipContent sets indicator to line, and cursor is false. The month stays as the tooltip title, and the row is named Desktop from config.

Which series is actually drawn?

Line uses dataKey desktop. config also names mobile with color var(--chart-2), and the rows include mobile, but this file adds no second Line. LineChart sets accessibilityLayer.

API Reference

Chart

Sets config={chartConfig} and indicator="line". The rest is on the Chart page.

All 70 chart examples