Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Chart Tooltip without Indicator

A tooltip with no color marks: the date, then each series' name and value as plain text, for charts whose series are already easy to tell apart.

Framework
Charting library

Preview

Preview width

About

The quietest version that still has a heading: the date on top, then each series' name and value, with no dot or line beside them. Use it for a single series, or when the series are labeled on the chart and the color mark repeats what the reader already knows.

The rows keep their order and alignment, so the values still read as a column.

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

Customize

  • <ChartTooltipContent hideIndicator /> is the only change from the default.
  • A config icon still renders, since it replaces the indicator rather than sitting beside it.
  • Keep the chartConfig labels distinct: with no color mark, they're how a row maps to a segment.

FAQ

How do I hide the indicators?

Pass hideIndicator to ChartTooltipContent.

When should I drop the indicators?

When color adds nothing: a single series, series named on the chart itself, or colors so close the dot can't tell them apart anyway. With two distinct series, as here, the dots usually help.

Is it still accessible?

Yes, as long as the names are clear. Without indicators, the reader matches rows to bars by name only, so pair it with a legend or direct labels when there are more than two series.

Does hideIndicator hide config icons too?

No. ChartTooltipContent renders a config icon before it checks hideIndicator. Remove the icon from chartConfig for a text-only row.

Can I make it smaller still?

Add hideLabel as well, as the No Label variant does: then each row is just a name and a value.

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