Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Chart Tooltip with Line Indicator

A tooltip that marks each series with a thin vertical bar instead of a dot, the indicator that suits line and area charts, in React with Recharts.

Framework
Charting library

Preview

Preview width

About

Same tooltip, different mark: each series gets a narrow vertical bar in its color, as tall as its row, instead of a square dot. Use it on line and area charts, where a stroke reads more naturally than a filled square.

The label and the rows don't change. Only the indicator does, so you can compare it with the default on the same stack of running and swimming.

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 { ChartTooltipIndicatorLine } from "@/components/charts/chart-tooltip-indicator-line";
<ChartTooltipIndicatorLine />

Customize

  • <ChartTooltipContent indicator="line" /> is the only change from the default.
  • The line is a w-1 div with the item's color as its background and border.
  • indicator also takes dot and dashed.
  • Pair line with line and area charts; on these bars it's here to compare with the dot.

FAQ

How do I switch the indicator?

Pass indicator="line" to ChartTooltipContent. The other values are dot, the default, and dashed.

When should I use the line instead of the dot?

A line echoes a stroke, so it matches line and area charts, where a square dot hints at a bar that isn't there. On bars, the dot is the closer match; this chart shows the line on bars only to compare.

What does the dashed indicator look like?

dashed draws a narrow outline with a dashed border in the series color. It's the usual pairing for dashed strokes, such as a forecast drawn beside actuals.

Where does the indicator's color come from?

From the payload item's color, which is the <Bar>'s fill, var(--color-running) here. Change color in chartConfig and both follow.

What changes with a single series?

With one payload item and an indicator other than dot, ChartTooltipContent nests the label inside the row next to the line, so the box stays compact.

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