# Tooltip Chart Label Formatter

A gradient area chart whose tooltip heading shows a longer date than the axis ticks.

Tooltip Chart Label Formatter is an open-source chart from suiss/ui for React. The @esuiss/ui CLI copies its source into your project, so you own the code.

Source: https://ui.suiss.app/docs/charts/tooltip-chart-label-formatter

**React**

**Example**

```tsx title="components/charts/tooltip-chart-label-formatter.tsx"
"use client"

import * as React from "react"
import { Area, AreaChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

function dayKey(date: Date) {
  return [
    date.getFullYear(),
    String(date.getMonth() + 1).padStart(2, "0"),
    String(date.getDate()).padStart(2, "0"),
  ].join("-")
}

const chartData = [
  512, 604, 455, 389, 662, 598, 431, 520, 690, 447, 575, 402, 633, 558,
].map((energy, index) => ({
  date: dayKey(new Date(2026, 8, 23 + index)),
  energy,
}))

const chartConfig = {
  energy: { label: "Active energy", color: "var(--color-red-500)" },
} satisfies ChartConfig

const longDate = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  month: "long",
  day: "numeric",
})

export function TooltipChartLabelFormatter() {
  const id = React.useId()
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Custom label</CardTitle>
        <CardDescription>The date written out in full</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-52 w-full"
        >
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ top: 70, right: 12, left: 12, bottom: 0 }}
          >
            <defs>
              <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="0%"
                  stopColor="var(--color-energy)"
                  stopOpacity={0.38}
                />
                <stop
                  offset="100%"
                  stopColor="var(--color-energy)"
                  stopOpacity={0.02}
                />
              </linearGradient>
            </defs>
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              interval={2}
              tickFormatter={(value: string) => String(Number(value.slice(8)))}
            />
            <ChartTooltip
              defaultIndex={8}
              content={
                <ChartTooltipContent
                  indicator="line"
                  labelFormatter={(_, payload) =>
                    longDate.format(
                      new Date(`${payload[0]?.payload.date}T12:00:00`)
                    )
                  }
                />
              }
            />
            <Area
              dataKey="energy"
              type="monotone"
              stroke="var(--color-energy)"
              strokeWidth={2}
              fill={`url(#${id})`}
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

Two weeks of active energy as a gradient area, where the axis shows only day numbers but the tooltip heading spells out the weekday. Use a label formatter when the axis needs short labels and the tooltip has room for the full context.

## Installation

### CLI

```bash title="Terminal"
npx shadcn@latest add @esuiss/tooltip-chart-label-formatter
```

Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add charts tooltip-chart-label-formatter
```

### Manual

1. Install the dependencies:

```bash title="Terminal"
npm install recharts
```

2. Add the pieces it builds on: [Card](https://ui.suiss.app/docs/components/card), [Chart](https://ui.suiss.app/docs/components/chart).

3. Copy the source into `components/charts/tooltip-chart-label-formatter.tsx`:

```tsx title="components/charts/tooltip-chart-label-formatter.tsx"
"use client"

import * as React from "react"
import { Area, AreaChart, XAxis } from "recharts"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart"

function dayKey(date: Date) {
  return [
    date.getFullYear(),
    String(date.getMonth() + 1).padStart(2, "0"),
    String(date.getDate()).padStart(2, "0"),
  ].join("-")
}

const chartData = [
  512, 604, 455, 389, 662, 598, 431, 520, 690, 447, 575, 402, 633, 558,
].map((energy, index) => ({
  date: dayKey(new Date(2026, 8, 23 + index)),
  energy,
}))

const chartConfig = {
  energy: { label: "Active energy", color: "var(--color-red-500)" },
} satisfies ChartConfig

const longDate = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  month: "long",
  day: "numeric",
})

export function TooltipChartLabelFormatter() {
  const id = React.useId()
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Custom label</CardTitle>
        <CardDescription>The date written out in full</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-52 w-full"
        >
          <AreaChart
            accessibilityLayer
            data={chartData}
            margin={{ top: 70, right: 12, left: 12, bottom: 0 }}
          >
            <defs>
              <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
                <stop
                  offset="0%"
                  stopColor="var(--color-energy)"
                  stopOpacity={0.38}
                />
                <stop
                  offset="100%"
                  stopColor="var(--color-energy)"
                  stopOpacity={0.02}
                />
              </linearGradient>
            </defs>
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              interval={2}
              tickFormatter={(value: string) => String(Number(value.slice(8)))}
            />
            <ChartTooltip
              defaultIndex={8}
              content={
                <ChartTooltipContent
                  indicator="line"
                  labelFormatter={(_, payload) =>
                    longDate.format(
                      new Date(`${payload[0]?.payload.date}T12:00:00`)
                    )
                  }
                />
              }
            />
            <Area
              dataKey="energy"
              type="monotone"
              stroke="var(--color-energy)"
              strokeWidth={2}
              fill={`url(#${id})`}
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

4. Update the import paths to match your project.

## Usage

```tsx
import { TooltipChartLabelFormatter } from "@/components/charts/tooltip-chart-label-formatter"
```

```tsx
<TooltipChartLabelFormatter />
```

Pass a `labelFormatter` to `ChartTooltipContent` and build the heading from the hovered record, which arrives in its second argument. Adjust the date format there, for example to add the year when your range spans more than one year.

## Notes

The demo format shows the weekday, month and day, so ranges that cross a month boundary stay clear. It leaves out the year.