Chart Legend

import { ChartLegend } from "@/components/ui/chart-legend";

export default function Example() {
  return <ChartLegend />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const ChartLegend = forwardRef(({ className, items = [], direction = "horizontal", ...props }, ref) => (
  <div ref={ref} className={cn("flex flex-wrap gap-4 text-sm", direction === "vertical" && "flex-col gap-2", className)} {...props}>
    {items.map((item, i) => (
      <div key={i} className="flex items-center gap-2">
        <span className="h-3 w-3 rounded-sm" style={{ backgroundColor: item.color }} />
        <span className="text-muted-foreground">{item.label}</span>
      </div>
    ))}
  </div>
));
ChartLegend.displayName = "ChartLegend";

export { ChartLegend };