---
title: Tooltip
description: Tooltips that surface the values under the pointer as you hover a chart.
image: /og/tooltip.png
---

## Usage

Add `<EChartsAreaChart.Tooltip />` as a child of the chart root. It reads the chart's data and config from context — no props are required to get a working tooltip.

```tsx
import { EChartsAreaChart } from "@/components/evilcharts/charts/echarts-area-chart";

<EChartsAreaChart data={data} config={chartConfig}>
  <EChartsAreaChart.Tooltip variant="frosted-glass" roundness="md" position="fixed" />
</EChartsAreaChart>;
```

## Variants

Control the tooltip surface with the `variant` prop on the `<Tooltip />` part.

### Default

### variant='default'

```tsx
"use client";

import { EChartsBarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-bar-chart";

const data = [
  { month: "January", desktop: 342, mobile: 184 },
  { month: "February", desktop: 876, mobile: 491 },
  { month: "March", desktop: 512, mobile: 290 },
  { month: "April", desktop: 629, mobile: 391 },
  { month: "May", desktop: 458, mobile: 309 },
  { month: "June", desktop: 781, mobile: 449 },
  { month: "July", desktop: 394, mobile: 234 },
  { month: "August", desktop: 925, mobile: 557 },
  { month: "September", desktop: 647, mobile: 367 },
  { month: "October", desktop: 532, mobile: 357 },
  { month: "November", desktop: 803, mobile: 515 },
  { month: "December", desktop: 271, mobile: 149 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  mobile: {
    label: "Mobile",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function EChartsExampleBarChart() {
  return (
    <EChartsBarChart data={data} config={chartConfig} className="h-full w-full p-4">
      <EChartsBarChart.Grid />
      <EChartsBarChart.XAxis dataKey="month" tickFormatter={(value: string) => value.substring(0, 3)} />
      <EChartsBarChart.Legend />
      <EChartsBarChart.Tooltip
        variant="default" // [!code highlight]
        defaultIndex={4}
      />
      <EChartsBarChart.Bar dataKey="desktop" variant="default" />
      <EChartsBarChart.Bar dataKey="mobile" variant="default" />
    </EChartsBarChart>
  );
}

```

### Frosted Glass

### variant='frosted-glass'

```tsx
"use client";

import { EChartsBarChart, type ChartConfig } from "@/components/evilcharts/charts/echarts-bar-chart";

const data = [
  { month: "January", desktop: 342, mobile: 184 },
  { month: "February", desktop: 876, mobile: 491 },
  { month: "March", desktop: 512, mobile: 290 },
  { month: "April", desktop: 629, mobile: 391 },
  { month: "May", desktop: 458, mobile: 309 },
  { month: "June", desktop: 781, mobile: 449 },
  { month: "July", desktop: 394, mobile: 234 },
  { month: "August", desktop: 925, mobile: 557 },
  { month: "September", desktop: 647, mobile: 367 },
  { month: "October", desktop: 532, mobile: 357 },
  { month: "November", desktop: 803, mobile: 515 },
  { month: "December", desktop: 271, mobile: 149 },
];

const chartConfig = {
  desktop: {
    label: "Desktop",
    colors: {
      light: ["#047857"],
      dark: ["#10b981"],
    },
  },
  mobile: {
    label: "Mobile",
    colors: {
      light: ["#be123c"],
      dark: ["#f43f5e"],
    },
  },
} satisfies ChartConfig;

export function EChartsExampleBarChart() {
  return (
    <EChartsBarChart data={data} config={chartConfig} className="h-full w-full p-4">
      <EChartsBarChart.Grid />
      <EChartsBarChart.XAxis dataKey="month" tickFormatter={(value: string) => value.substring(0, 3)} />
      <EChartsBarChart.Legend />
      <EChartsBarChart.Tooltip
        variant="frosted-glass" // [!code highlight]
        defaultIndex={4}
      />
      <EChartsBarChart.Bar dataKey="desktop" variant="default" />
      <EChartsBarChart.Bar dataKey="mobile" variant="default" />
    </EChartsBarChart>
  );
}

```

## API Reference


  ### `variant`

type: `"default" | "frosted-glass"` · default: `"default"`

Visual style of the tooltip surface.
  ### `roundness`

type: `"sm" | "md" | "lg" | "xl"` · default: `"lg"`

Corner radius of the tooltip container.
  ### `position`

type: `"variable" | "fixed"` · default: `"variable"`

`variable` follows the pointer on both axes; `fixed` pins the tooltip near the top of the chart and tracks the pointer along the X axis only.
  ### `cursor`

type: `boolean` · default: `true`

Shows the axis-pointer line that marks the hovered category.
  ### `defaultIndex`

type: `number`

Data index shown when the chart first renders, before any hover.