Skip to content

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

Free

An interactive line chart for React

Three months of daily page views as one line, no dots. Short dates on the axis, the full date in the tooltip, desktop until you change it.

Three months of daily page views as one line, no dots, at a fixed height. Short dates on the axis, the full date in the tooltip. The series is desktop until you change the constant.

Use it for a daily trend that is too dense for a month label on every point. To let people flip series, use Tabs. In React, Base UI does not format those dates or pick the series. You pass both.

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
    className="aspect-auto h-[250px] w-full"
    config={chartConfig}
  >
    <LineChart
      accessibilityLayer
      data={chartData}
      margin={{
        left: 12,
        right: 12,
      }}
    >
      <CartesianGrid vertical={false} />
      <XAxis
        axisLine={false}
        dataKey="date"
        minTickGap={32}
        tickFormatter={formatDateTick}
        tickLine={false}
        tickMargin={8}
      />
      <ChartTooltip
        content={
          <ChartTooltipContent
            className="w-[150px]"
            labelFormatter={formatDateLabel}
            nameKey="views"
          />
        }
      />
{/* The rest of the file is under Installation. */}

FAQ

How do I chart the mobile series?

activeChart is "desktop". Set it to "mobile". Line uses dataKey={activeChart} and a stroke of var(--color- plus that key. config maps desktop to var(--chart-1) and mobile to var(--chart-2).

How is the line drawn?

Line sets type="monotone", dot={false}, and strokeWidth={2}. monotone curves between the daily points, and dot={false} leaves the stroke without markers. Only the activeChart key is plotted.

How do the axis and the tooltip format dates?

XAxis sets dataKey="date", minTickGap={32}, and tickFormatter={formatDateTick}, a short month and day. labelFormatter is formatDateLabel, which adds the year, so the tooltip title reads like Apr 1, 2024. The content also sets a fixed width, w-[150px].

Why does the tooltip say Page Views?

ChartTooltipContent sets nameKey="views". The views entry in config has the label Page Views, and that becomes the row name for the series on the chart.

How is the height fixed?

ChartContainer sets aspect-auto h-[250px] w-full. aspect-auto clears the default 16:9 box so the 250px height holds. CartesianGrid sets vertical={false}. LineChart sets accessibilityLayer and a margin of left: 12 and right: 12.

What is the line that follows the pointer?

ChartTooltip doesn't set cursor to false, so the line chart keeps its default cursor, a vertical line on the hovered date. The tooltip row is Page Views and that day's value.

API Reference

Chart

Sets config={chartConfig}, labelFormatter={formatDateLabel} and nameKey="views". The rest is on the Chart page.

All 70 chart examples