||

Tooltip

Documentation Index

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

Interactive tooltips on chart data-point hover

Usage

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

Variants

Set the tooltip style with the tooltipVariant prop: "default" or "frosted-glass".

Default

A solid background.

tooltipVariant='default'

Frosted Glass

A semi-transparent background with a backdrop blur.

tooltipVariant='frosted-glass'

API Reference
PropTypeDefaultDescription
tooltipVariantdefault|frosted-glass"default"

The tooltip's visual style.

tooltipRoundnesssm|md|lg|xl"lg"

The tooltip's border-radius.

tooltipDefaultIndexnumber–

Shows the tooltip by default at this data-point index.

hideTooltipbooleanfalse

When true, hides the tooltip.

indicatorline|dot|dashed"dot"

Style of the color indicator beside each item.

hideLabelbooleanfalse

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

hideIndicatorbooleanfalse

When true, hides the color indicator beside each item.

Did you like the content?