Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Line Chart with Dots

A smooth line with a filled dot on every month, so each real reading stands out from the curve that joins them, in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Pick it when each point is a real measurement and the curve only joins them: monthly snapshots, survey waves, sprint results. The dots show people where the data is, which matters with few points. With dozens of points, drop the dots and mark only the hovered one.

A natural curve through six months with a filled dot on each, in the series color. Hovering marks the active month, and the tooltip shows its 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 { ChartLineDots } from "@/components/charts/chart-line-dots";
<ChartLineDots />

Customize

  • dot={{ fill: "var(--color-desktop)" }} draws a filled marker on every point, outlined in the line's own stroke.
  • activeDot={{ r: 6 }} grows the hovered point.
  • type="natural" and strokeWidth={2} match the plain Line Chart; only the dot props differ.
  • <ChartTooltipContent hideLabel /> drops the month, and cursor={false} hides the vertical hover line.

FAQ

How do I change the size of the dots?

Put r in the dot object, dot={{ fill: "var(--color-desktop)", r: 4 }}, and in activeDot for the hovered one.

How do I draw hollow dots?

Pass dot={{ fill: "var(--background)", stroke: "var(--color-desktop)", strokeWidth: 2 }} to <Line>.

Can I show the dots only on hover?

Yes. Set dot={false} and keep activeDot={{ r: 6 }}: Recharts then draws a dot only on the hovered point.

Should I keep the dots with a lot of data?

Not past a few dozen points. The dots merge into a thick band and hide the line's shape. Keep them for monthly or weekly data; for daily data, mark only the hovered day.

Can the dots be a different color from the line?

Yes. The dot object's fill and stroke are separate from the line's stroke. To color each dot by category, pass a function to dot, as the Line Chart with Colored Dots does.

What does keyboard focus look like?

With accessibilityLayer, Tab focuses the chart and the arrow keys move the active point, which Recharts draws with activeDot.

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