Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Line Chart with Custom Dots

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

Framework
Charting library

Preview

Preview width

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

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

Usage

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

Customize

  • dot on <Line> is a function: it gets cx, cy and the row's payload and returns lucide's GitCommitVertical icon.
  • The icon is 24px, so it's placed at cx - 12, cy - 12 to center it on the point. Change r in the function to resize it.
  • stroke="var(--color-desktop)" colors the icon's outline, and fill="var(--background)" matches the card so the line doesn't show through the ring.
  • The function returns null when cx or cy is missing, so a gap in the data draws no stray icon.
  • <ChartTooltipContent hideLabel /> shows the value alone.

FAQ

How is the commit marker drawn?

<Line>'s dot prop is a function that returns lucide's GitCommitVertical icon at each point, 24px wide, centered on cx and cy.

Can I use a different marker?

Yes. Return any lucide icon, or any SVG, from the dot function. Set its width and height, and offset x and y by half of them so it centers on the point.

Can different months use different markers?

Yes. The dot function gets the row as payload, so it can return a different icon per month, such as a check for a release and an alert for an incident.

Why does the ring stay hollow in dark mode?

The icon's fill is the page background and its stroke is var(--color-desktop). With this theme's OKLCH tokens, pass var(--background) as it is: the hsl(var(--background)) form from older examples isn't a valid color.

How do I make the markers bigger?

Change r inside the dot function: it sets the icon's width and height and the half-size offsets. Larger icons need a bigger margin on <LineChart> so the top one isn't clipped.

Do the custom markers change keyboard focus?

No. accessibilityLayer moves the tooltip month by month whatever the dot function draws.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

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

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts