Skip to content

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

Free

A linear line chart for React

Desktop visitors across six months, joined with straight segments so every change of direction is a corner. No dots.

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, Base UI does not pick straight segments. You set this one to linear.

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,
      }}
    >
      <CartesianGrid vertical={false} />
      <XAxis
        axisLine={false}
        dataKey="month"
        tickFormatter={formatMonth}
        tickLine={false}
        tickMargin={8}
      />
      <ChartTooltip
        content={<ChartTooltipContent hideLabel />}
        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.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The row is the Desktop value from config for the hovered month.

Which points does the line join?

January 186, February 305, March 237, April 73, May 209, and June 214, on dataKey desktop. type linear draws one straight segment between each pair.

API Reference

Chart

Sets config={chartConfig} and hideLabel. The rest is on the Chart page.

All 70 chart examples