Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tooltip - Label Formatter Chart for React

Stacked running and swimming bars. The axis shows short weekdays, and the tooltip title spells out the month, the day, and the year.

Stacked running and swimming bars. The axis shows short weekdays. The tooltip, already open on the second day, titles itself with the month name, the day, and the year.

Use a label formatter when the axis is short and the tooltip should spell the date out. Leave the raw date if you do not mind it. A Tooltip does not format chart dates. In React, Base UI does not rewrite the title. You pass the formatter.

Preview

Preview width

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

Anatomy

Chart anatomy: container, grid, axis, bar, tooltip, legend

Usage

<div className="w-full max-w-xl rounded-md border bg-background p-4">
  <ChartContainer config={chartConfig}>
    <BarChart accessibilityLayer data={chartData}>
      <XAxis
        axisLine={false}
        dataKey="date"
        tickFormatter={formatWeekday}
        tickLine={false}
        tickMargin={10}
      />
      <Bar
        dataKey="running"
        fill="var(--color-running)"
        radius={[0, 0, 4, 4]}
        stackId="a"
      />
      <Bar
        dataKey="swimming"
        fill="var(--color-swimming)"
        radius={[4, 4, 0, 0]}
        stackId="a"
      />
      <ChartTooltip
        content={<ChartTooltipContent labelFormatter={formatDateLabel} />}
        cursor={false}
        defaultIndex={1}
      />
    </BarChart>
  </ChartContainer>
</div>

FAQ

How does the tooltip turn the date into a full date?

ChartTooltipContent sets labelFormatter to formatDateLabel. That function receives the label, which is the date string, and calls toLocaleDateString with en-US, a long month, a numeric day, and a numeric year.

What does the axis show?

XAxis uses dataKey="date" and tickFormatter={formatWeekday}, a short weekday only. axisLine and tickLine are false, and tickMargin is 10. The full date is only in the tooltip title.

What is under that title?

ChartTooltipContent leaves indicator at dot. Each row is the label from config, Running or Swimming, and the value with toLocaleString. There is no formatter and no hideLabel, so the title and the dots both stay.

Why is a tooltip open on load?

ChartTooltip sets defaultIndex={1} and cursor={false}. Index 1 is 2024-07-16, so the title is that date run through formatDateLabel. cursor={false} turns the hover cursor off.

How are the bars stacked?

Both Bar components set stackId="a". Running is first, on the baseline, with radius={[0, 0, 4, 4]} and fill="var(--color-running)". Swimming is on top, with radius={[4, 4, 0, 0]} and fill="var(--color-swimming)".

Where do the dot colors come from?

config sets running to var(--chart-1) and swimming to var(--chart-2). ChartContainer writes --color-running and --color-swimming, which the bars' fill reads. BarChart sets accessibilityLayer.

API Reference

Chart

Sets config={chartConfig} and labelFormatter={formatDateLabel}. The rest is on the Chart page.

All 70 chart examples