||

Tooltip

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
tooltipVariant

Controls the visual style of the tooltip.

type: "default" | "frosted-glass"

default: "default"

tooltipRoundness

Controls the border-radius of the tooltip.

type: "sm" | "md" | "lg" | "xl"

default: "lg"

tooltipDefaultIndex

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

type: number

hideTooltip

When true, hides the tooltip entirely.

type: boolean

default: false

indicator

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

type: "line" | "dot" | "dashed"

default: "dot"

hideLabel

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

type: boolean

default: false

hideIndicator

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

type: boolean

default: false

Did you like the content?