shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Line Chart with Custom Dots

Q: How is the commit marker drawn?

With marks, not an icon component: a vector mark draws an 18px vertical stem centered on each point (headLength: 0, so no arrowhead), and a dot mark draws a ring over it with a background fill. Together they match lucide's GitCommitVertical at 24px, the icon shadcn/ui's Recharts version uses.

Q: Can I use a different marker?

Change the stem or the ring. The vector's length and rotate (degrees, 0 points up) reshape the stem, and the dot's r, fill and stroke the ring. For a glyph such as ◆ or ▲, swap them for a text mark at the same x and y.

Q: Can different months use different markers?

Yes. The vector's length and rotate and the dot's r take functions of the row, so a field like kind: "release" can pick the stem or the size. Say what the shapes mean in the card or the tooltip too: shapes alone are easy to miss.

Q: Why does the ring stay hollow in dark mode?

Its fill is var(--background), the card's own color, which your theme switches with .dark. The stem and the ring's edge use var(--color-desktop) from chartConfig, so the whole marker follows the theme.

Q: How do I make the markers bigger?

Raise the dot's r and the vector's length together, so the stem stays longer than the ring. Leave room at the top: the top margin is 0 here, so a bigger marker on the highest month can reach past the plot.

A line whose points are commit-style markers, a hollow ring on a short vertical stroke, for releases and deploys, in React with TanStack Charts.

PreviewCode

About

Reach for it when each point is an event as much as a value: a release, a deploy, a commit. The marker reads like a commit on a timeline, so the chart fits developer tools and changelogs. For plain readings, the Line Chart with Dots is quieter.

A natural curve through six months, with each point drawn as a hollow ring on a short vertical stroke in the series color, filled with the card's background. The tooltip shows the value alone.

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Usage

import { ChartLineDotsCustom } from "@/components/charts/chart-line-dots-custom";

<ChartLineDotsCustom />

Customize

The marker is two marks over the rows: a vector draws an 18px stem through each point (headLength: 0), and a dot draws the ring, r: 3 with fill: "var(--background)"; both stroke 2px in var(--color-desktop).
Marks paint in array order: line, then stem, then ring, so the ring's fill hides the line where they meet.
Because the ring fills with var(--background), it matches the card in both themes without a second color.
Both are wrapped in decorative(), so the pointer and the keys still read the line's points. Any mark on x: "month" and y: "desktop" lands on them, so a new marker is a change of length, radius or stroke.
ChartContainer's tooltip passes { hideLabel: true }.

FAQ

How is the commit marker drawn?

With marks, not an icon component: a vector mark draws an 18px vertical stem centered on each point (headLength: 0, so no arrowhead), and a dot mark draws a ring over it with a background fill. Together they match lucide's GitCommitVertical at 24px, the icon shadcn/ui's Recharts version uses.

Can I use a different marker?

Change the stem or the ring. The vector's length and rotate (degrees, 0 points up) reshape the stem, and the dot's r, fill and stroke the ring. For a glyph such as ◆ or ▲, swap them for a text mark at the same x and y.

Can different months use different markers?

Yes. The vector's length and rotate and the dot's r take functions of the row, so a field like kind: "release" can pick the stem or the size. Say what the shapes mean in the card or the tooltip too: shapes alone are easy to miss.

Why does the ring stay hollow in dark mode?

Its fill is var(--background), the card's own color, which your theme switches with .dark. The stem and the ring's edge use var(--color-desktop) from chartConfig, so the whole marker follows the theme.

How do I make the markers bigger?

Raise the dot's r and the vector's length together, so the stem stays longer than the ring. Leave room at the top: the top margin is 0 here, so a bigger marker on the highest month can reach past the plot.

Do the custom markers change keyboard focus?

No. Tab into the chart and the arrow keys still step through the six months; each stop updates the tooltip, which screen readers announce. The markers only change how the points look.

API Reference

ChartContainer

<div> data-slot="chart"

PropType

configChartConfig

Each series' label, icon and color, read by the tooltip and the legend.

definitionChartDefinition

The chart: defineChart(spec, chartTooltip()), its data, marks, scales and axes, and the tooltip's focus.

ariaLabelstring

The chart's accessible name: the card's title.

ariaDescription?string

The chart's accessible description.

className?string

The container's size: aspect-auto h-[250px] w-full, mx-auto aspect-square max-h-[250px]. It's aspect-video by default.

children?ReactNode

What sits under the chart inside the container: a ChartLegend.

tooltip?ChartTooltipContentProps | false

ChartTooltipContent's props (indicator, hideLabel, formatter…) for the default body, or false for TanStack's own tooltip body.

Type: ChartTooltipContentProps | false

renderTooltip?(context: ChartTooltipBodyRenderContext) => ReactNode

A whole tooltip body of your own, in place of ChartTooltipContent: it gets the focused points (each with its datum, group and color).

Type: (context: ChartTooltipBodyRenderContext) => ReactNode

defaultIndex?number

The category whose tooltip shows before any pointer, as Recharts' defaultIndex.

height?number

A fixed height in pixels for the chart, in place of the container's.

aspectRatio?number

A width-to-height ratio for the chart, in place of the container's height.

initialWidth?number

The width the chart renders at before it's measured.

onFocusChange?(point: ChartPoint | null) => void

Called as the focused point changes: a pointer, a key or a tap.

Type: (point: ChartPoint | null) => void

onFocusGroupChange?(points: readonly ChartPoint[]) => void

Called with every point at the focused category (a stacked or grouped chart's).

Type: (points: readonly ChartPoint[]) => void

onSelect?(point: ChartPoint | null) => void

Called when a point is clicked or picked with Enter.

Type: (point: ChartPoint | null) => void

CSS variableType

--color-<key>?color

Each config key's color (its theme color in light and dark), set on the container: the marks paint with var(--color-<key>).

ChartTooltipContent

<div>

PropType

pointsreadonly ChartPoint[]

The focused points, from the tooltip's context. ChartContainer passes them to its default body; a body of your own passes its context's.

indicator?"dot" | "line" | "dashed"

The indicator's shape beside each row.

Type: "dot" | "line" | "dashed"
Default: "dot"

hideLabel?boolean

Hides the label above the rows (the focused category).

Default: false

hideIndicator?boolean

Hides each row's color indicator.

Default: false

label?string

The label's text in place of the focused category, looked up in config.

labelKey?string

The datum field (or config key) the label is read from, looked up in config.

nameKey?string

The datum field (or config key) each row's series is read from: a pie's browser.

valueKey?string

The datum field each row's value is read from, for points that carry geometry rather than values (a pie's, from pie()).

color?string

One indicator color for every row, in place of each series' own.

labelFormatter?(label: string, points: readonly ChartPoint[]) => string

Formats the label (the config's label or the category), with the rows' points: a date written out, a unit.

Type: (label: string, points: readonly ChartPoint[]) => string

formatter?(value: number | string, name: string, item: ChartTooltipItem, index: number) => ReactNode

A row's content in place of its indicator, name and value, as shadcn's formatter: a unit, a currency, a total row.

Type: (value: number | string, name: string, item: ChartTooltipItem, index: number) => ReactNode

className?string

Classes for the tooltip's card.

ChartLegend

<div>

PropType

config?ChartConfig

The series to list: the container's config by default.

keys?readonly string[]

The series keys to list, in order: every key with a color by default.

hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default: false

verticalAlign?"top" | "bottom"

Above the chart or under it.

Type: "top" | "bottom"
Default: "bottom"

className?string

Classes for the legend's row.

ChartConfig

KeyType

label?string

The series' name in the tooltip and the legend.

icon?Component

An icon beside its name in the legend and the tooltip (a lucide-react icon).

color?string

Its color in both themes: a token (var(--chart-1)) or any CSS color.

theme?{ light: string; dark: string }

A color for each theme, in place of color.

Helpers

ExportType

chartTooltip?(settings?: ChartTooltipSettings) => ChartDefinitionOptions

defineChart's second argument for a chart with a tooltip: what a pointer or a key focuses (group-x, each category's series, by default), the focus ring, and the host ChartContainer draws its body in.

Type: (settings?: ChartTooltipSettings) => ChartDefinitionOptions

chartTheme?ChartTheme

defineChart's theme in the site's tokens: the text, the grid and the palette (--chart-1 to --chart-5).

chartColors?(config: ChartConfig, keys?: readonly string[]) => { domain: string[]; range: string[] }

defineChart's color: each series key (in config order, or keys') painted var(--color-<key>), for marks with a color channel.

Type: (config: ChartConfig, keys?: readonly string[]) => { domain: string[]; range: string[] }

chartLinearScale?() => LinearScale

A value axis drawn as Recharts draws its default one: zero in the domain, five nice ticks. Pass it as a factory: y: { scale: chartLinearScale }.

Type: () => LinearScale

curveNatural?CurveFactory

D3's natural curve, for a smooth line or area: curve: d3Curve(curveNatural).

curveStep?CurveFactory

D3's step curve, for a line or area that holds each value: curve: d3Curve(curveStep).

curveMonotoneX?CurveFactory

D3's monotone curve, smooth without overshooting a point: curve: d3Curve(curveMonotoneX).

curveLinearClosed?CurveFactory

D3's closed linear curve: a radar's polygon (curve: curveLinearClosed on radialLine and radialArea).

useChart?() => { config: ChartConfig }

The config of the ChartContainer around a component of your own (a custom tooltip body or legend).

Type: () => { config: ChartConfig }

Line Chart with Dots
Line charts
A line with a dot on every data point.
Line Chart with Colored Dots
Line charts
A line whose dots each take their category's color.
Area Chart with Icons
Area charts
Stacked areas with an icon beside each series in the legend.
Line Chart with Labels
Line charts
Each point's value printed above the line.
Chart Tooltip with Icons
Tooltips
A tooltip with an icon beside each series.
Line Chart
Line charts
One series as a smooth line over six months.

All 70 charts

Preview

About

Installation

Usage

Customize

FAQ

How is the commit marker drawn?

Can I use a different marker?

Can different months use different markers?

Why does the ring stay hollow in dark mode?

How do I make the markers bigger?

Do the custom markers change keyboard focus?

API Reference

ChartContainer

ChartTooltipContent

ChartLegend

ChartConfig

Helpers

Related

Line Chart with Dots

Line Chart with Colored Dots

Area Chart with Icons

Line Chart with Labels

Chart Tooltip with Icons

Line Chart