recharts-legend

1import { getPayloadConfigFromPayload, getColorsCount, useChart } from "@/registry/ui/recharts-chart";
2import * as RechartsPrimitive from "recharts";
3import { cn } from "@/lib/utils";
4import * as React from "react";
5 
6type ChartLegendVariant =
7  | "square"
8  | "circle"
9  | "circle-outline"
10  | "rounded-square"
11  | "rounded-square-outline"
12  | "vertical-bar"
13  | "horizontal-bar";
14 
15function ChartLegendContent({
16  className,
17  hideIcon = false,
18  nameKey,
19  payload,
20  verticalAlign,
21  align = "right",
22  selected,
23  onSelectChange,
24  isClickable,
25  variant = "rounded-square",
26}: React.ComponentProps<"div"> & {
27  hideIcon?: boolean;
28  nameKey?: string;
29  selected?: string | null;
30  isClickable?: boolean;
31  onSelectChange?: (selected: string | null) => void;
32  variant?: ChartLegendVariant;
33} & RechartsPrimitive.DefaultLegendContentProps) {
34  const { config } = useChart();
35 
36  if (!payload?.length) {
37    return null;
38  }
39 
40  return (
41    <div
42      className={cn(
43        "flex items-center gap-4 select-none",
44        align === "left" && "justify-start",
45        align === "center" && "justify-center",
46        align === "right" && "justify-end",
47        verticalAlign === "top" ? "pb-4" : "pt-4",
48        className,
49      )}
50    >
51      {payload
52        .filter((item) => item.type !== "none")
53        .map((item) => {
54          // For pie charts, item.value contains the sector name (e.g., "chrome")
55          // For radial charts, the name is in item.payload[nameKey]
56          // For other charts, item.dataKey contains the series name (e.g., "desktop")
57          const payloadName =
58            nameKey && item.payload
59              ? (item.payload as Record<string, unknown>)[nameKey]
60              : undefined;
61          const key = `${payloadName ?? item.value ?? item.dataKey ?? "value"}`;
62          const itemConfig = getPayloadConfigFromPayload(config, item, key);
63          const isSelected = selected === null || selected === key;
64 
65          // Get colors count for this item to determine gradient vs solid
66          const colorsCount = itemConfig ? getColorsCount(itemConfig) : 1;
67 
68          return (
69            <div
70              key={key}
71              className={cn(
72                "[&>svg]:text-muted-foreground flex items-center gap-1.5 transition-opacity [&>svg]:h-3 [&>svg]:w-3",
73                !isSelected && "opacity-30",
74                isClickable && "cursor-pointer",
75              )}
76              onClick={() => {
77                if (!isClickable) return;
78 
79// … truncated