0|

Tooltip

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Display interactive tooltips when hovering over chart data points

Usage

import { BeeBarChart, Bar, XAxis, Grid, Legend, Tooltip } from "@beecharts/bar-chart";
 
<BeeBarChart data={data} config={chartConfig} xDataKey="month" className="h-full w-full p-4">
  <Grid />
  <XAxis dataKey="month" />
  <Legend />
  <Tooltip variant="frosted-glass" roundness="lg" />
  <Bar dataKey="desktop" />
  <Bar dataKey="mobile" />
</BeeBarChart>

Variants

Control the visual style with variant on <Tooltip /> ("default" or "frosted-glass").

Default

The default variant uses a solid background.

tooltipVariant='default'

Frosted Glass

The frosted-glass variant applies a semi-transparent background with a backdrop blur effect for a frosted-glass look.

tooltipVariant='frosted-glass'

API Reference

PropTypeDefaultDescription
tooltipVariantdefault|frosted-glass"default"

Controls the visual style of the tooltip.

tooltipRoundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

tooltipDefaultIndexnumber–

When set, the tooltip will be visible by default at the specified data point index.

hideTooltipbooleanfalse

When true, hides the tooltip entirely.

indicatorline|dot|dashed"dot"

The style of the color indicator shown next to each tooltip item.

hideLabelbooleanfalse

When true, hides the label (e.g. month name) at the top of the tooltip.

hideIndicatorbooleanfalse

When true, hides the color indicator dot/line next to each tooltip item.

Did you like the content?