Tooltip and legend

Tooltips and legends name the values in a chart: a tooltip for the point under the pointer, a legend for every series at once.

LLMs

Line indicator

Set indicator="line" on ChartTooltipContent to mark each row with a short vertical bar instead of a dot.

Dashed indicator

Set indicator="dashed" on ChartTooltipContent to mark each row with a dashed line in the series color.

Hide label

Pass hideLabel to ChartTooltipContent to drop the title row and show only the series values.

Hide indicator

Pass hideIndicator to drop the color marker, useful for a single series, here with a formatter that adds the unit.

Legend icons

Give a ChartConfig entry an icon and ChartLegendContent draws it in the series color instead of the dot.

Custom content

Pass your own component to the tooltip's content to show anything for the hovered item, like a short summary of each department.

Tooltip styles

Style the built-in tooltip with contentStyle for the box, itemStyle for each row and labelStyle for the title.

Legend hover

Handle the legend's onMouseEnter and onMouseLeave to fade the other lines while you hover one series in the legend.

Legend styles

Style the built-in legend with wrapperStyle, labelStyle, iconType and iconSize, and set inactiveColor for hidden series.

Legend position

Move the legend with position, layout and offset, from outside edges like bottom to corners inside the plot area.