Chart Tooltip

Customize tooltips to show contextual information on hover.

Default Tooltip

The default tooltip shows the label and value from your chart config.

Energy Data

Hover over bars to see values

Indicator Styles

Choose between dot, line, or dashed indicators.

Dot (Default)

Line

Dashed

Hide Label

Use hideLabel for single-series charts or pie charts.

Solar Only

Tooltip without label header

With Icons

Add icons to your chart config for richer tooltips.

Energy Mix

Icons appear in tooltip and legend

import { Sun, Zap, Battery } from "lucide-react"

const chartConfig = {
  solar: {
    label: "Solar Production",
    color: "hsl(142, 76%, 36%)",
    icon: Sun,  // Icons show in tooltip
  },
  grid: {
    label: "Grid Import",
    color: "hsl(220, 14%, 50%)",
    icon: Zap,
  },
}

Custom Formatter

Use labelFormatter to customize the tooltip header.

Formatted Labels

Custom date formatting in tooltip

Legend Options

Position the legend at the top or bottom of your chart.

Legend Top

Legend Bottom

Usage

import { ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent } from "@/components/ui/chart"

{/* Basic tooltip */}
<ChartTooltip content={<ChartTooltipContent />} />

{/* Tooltip options */}
<ChartTooltip
  content={
    <ChartTooltipContent
      hideLabel          {/* Hide label header */}
      hideIndicator      {/* Hide color indicator */}
      indicator="dot"    {/* "dot" | "line" | "dashed" */}
      labelFormatter={(value) => `Custom: ${value}`}
    />
  }
/>

{/* Legend */}
<ChartLegend
  verticalAlign="top"  {/* "top" | "bottom" */}
  content={<ChartLegendContent nameKey="name" />}
/>

ChartConfig Reference

Property	Type	Description
label	ReactNode	Display name in tooltip and legend
color	string	CSS color value (HSL recommended)
icon	ComponentType	Icon component (e.g., Lucide icon)
theme	{ light, dark }	Theme-specific colors