Skip to content

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

Free

A line chart with custom dots for React

A desktop line where each point is a commit icon instead of a dot, stroked in the series color so the line does not show through.

A desktop line where each point is a commit icon instead of a dot. The icon is stroked in the series color and filled so the line does not show through.

Use an icon when the point means something, such as a release on a timeline. A plain dot is enough for a generic trend. A Table is enough when there is no shape to show. In React, Base UI does not draw the icon. You render it at each point.

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={renderDot}
        stroke="var(--color-desktop)"
        strokeWidth={2}
        type="natural"
      />
    </LineChart>
  </ChartContainer>
</div>

FAQ

How are the dots drawn as icons?

Line sets dot to renderDot, which returns a GitCommitVerticalIcon centered on the point. DOT_SIZE is 24, and x and y are cx and cy minus half of that size.

How is the icon colored?

The icon sets stroke to var(--color-desktop), className to fill-background, and aria-hidden to true. width and height are both DOT_SIZE. key is payload.month.

What does the line itself use?

Line uses dataKey desktop, type natural, stroke var(--color-desktop), and strokeWidth 2. config maps desktop to var(--chart-1) and the label Desktop.

How are the month ticks shortened?

XAxis uses dataKey month and tickFormatter set to formatMonth, the first three characters. axisLine and tickLine are false, tickMargin is 8, and the side margins are 12.

What does the tooltip show?

ChartTooltipContent sets hideLabel, and cursor is false. The row is the Desktop value from config. The icon is marked aria-hidden.

Can I move along the line with the keyboard?

Yes. LineChart sets accessibilityLayer. CartesianGrid sets vertical to false. The rows also include mobile, and the only Line reads desktop.

API Reference

Chart

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

All 70 chart examples