# Tooltip Chart Custom

A bar chart whose tooltip is fully custom markup, showing a large total, a unit and the day.

Tooltip Chart Custom 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-custom

**React**

**Example**

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

import { Bar, BarChart, XAxis } from "recharts"

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

const chartData = [
  { day: "Monday", steps: 8412 },
  { day: "Tuesday", steps: 10230 },
  { day: "Wednesday", steps: 6120 },
  { day: "Thursday", steps: 12480 },
  { day: "Friday", steps: 9050 },
  { day: "Saturday", steps: 14320 },
  { day: "Sunday", steps: 4870 },
]

const chartConfig = {
  steps: { label: "Steps", color: "var(--chart-4)" },
} satisfies ChartConfig

export function TooltipChartCustom() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Custom content</CardTitle>
        <CardDescription>A tooltip built from scratch</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-52 w-full"
        >
          <BarChart
            accessibilityLayer
            data={chartData}
            margin={{ top: 70, right: 4, left: 4, bottom: 0 }}
          >
            <XAxis
              dataKey="day"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              interval={0}
              tickFormatter={(value: string) => value.slice(0, 3)}
            />
            <ChartTooltip
              defaultIndex={5}
              cursor={false}
              content={({ active, payload, label }) => {
                const entry = payload?.[0]
                if (!active || !entry) return null
                return (
                  <div className="min-w-28 rounded-xl bg-popover px-3 py-2 shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10">
                    <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                      Total
                    </p>
                    <p className="flex items-baseline gap-1">
                      <span className="text-2xl font-semibold tabular-nums">
                        {Number(entry.value).toLocaleString("en-US")}
                      </span>
                      <span className="text-xs font-semibold text-muted-foreground">
                        steps
                      </span>
                    </p>
                    <p className="text-xs text-muted-foreground">{label}</p>
                  </div>
                )
              }}
            />
            <Bar
              dataKey="steps"
              fill="var(--color-steps)"
              radius={4}
              maxBarSize={26}
            />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

A step-count bar chart whose tooltip is built from scratch as a small card with a big number, unit and day name. Reach for it when the stock tooltip layout can't express what you need, such as a single headline value.

## Installation

### CLI

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

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-custom
```

### 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-custom.tsx`:

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

import { Bar, BarChart, XAxis } from "recharts"

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

const chartData = [
  { day: "Monday", steps: 8412 },
  { day: "Tuesday", steps: 10230 },
  { day: "Wednesday", steps: 6120 },
  { day: "Thursday", steps: 12480 },
  { day: "Friday", steps: 9050 },
  { day: "Saturday", steps: 14320 },
  { day: "Sunday", steps: 4870 },
]

const chartConfig = {
  steps: { label: "Steps", color: "var(--chart-4)" },
} satisfies ChartConfig

export function TooltipChartCustom() {
  return (
    <Card variant="filled" size="sm">
      <CardHeader>
        <CardTitle>Custom content</CardTitle>
        <CardDescription>A tooltip built from scratch</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer
          config={chartConfig}
          className="aspect-auto h-52 w-full"
        >
          <BarChart
            accessibilityLayer
            data={chartData}
            margin={{ top: 70, right: 4, left: 4, bottom: 0 }}
          >
            <XAxis
              dataKey="day"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              interval={0}
              tickFormatter={(value: string) => value.slice(0, 3)}
            />
            <ChartTooltip
              defaultIndex={5}
              cursor={false}
              content={({ active, payload, label }) => {
                const entry = payload?.[0]
                if (!active || !entry) return null
                return (
                  <div className="min-w-28 rounded-xl bg-popover px-3 py-2 shadow-lg ring-1 ring-foreground/5 dark:ring-foreground/10">
                    <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                      Total
                    </p>
                    <p className="flex items-baseline gap-1">
                      <span className="text-2xl font-semibold tabular-nums">
                        {Number(entry.value).toLocaleString("en-US")}
                      </span>
                      <span className="text-xs font-semibold text-muted-foreground">
                        steps
                      </span>
                    </p>
                    <p className="text-xs text-muted-foreground">{label}</p>
                  </div>
                )
              }}
            />
            <Bar
              dataKey="steps"
              fill="var(--color-steps)"
              radius={4}
              maxBarSize={26}
            />
          </BarChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}
```

4. Update the import paths to match your project.

## Usage

```tsx
import { TooltipChartCustom } from "@/components/charts/tooltip-chart-custom"
```

```tsx
<TooltipChartCustom />
```

Pass your own render function to the `content` prop of `ChartTooltip`; it receives the active state, the hovered rows and the label, and should return null when inactive. Change the unit text and number format inside it, and replace `chartData` and `chartConfig` as usual.

## Notes

A custom tooltip skips the built-in one entirely, so labels and colors from the config only appear if you read them yourself. The tooltip opens on a preset bar when the chart loads; remove `defaultIndex` to start hidden.