||

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

 
<EvilBarChart
  xDataKey="month"
  data={data}
  tooltipRoundness="md" | "sm" | "lg" | "xl"  
  chartConfig={chartConfig}
  tooltipVariant="frosted-glass" | "default" // and so on
/>

Variants

Control the visual style of the tooltip with the tooltipVariant prop. Accepts "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?