Add interactive legend toggle functionality to BarChart component

Author: Roman Snapko

packages/ui-components/src/ui/chart/bar-chart.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import {
   Bar,
   Customized,
@@ -55,6 +56,33 @@ export function BarChart({
   legendClassName,
   className,
 }: BarChartProps): React.JSX.Element {
+  const [hiddenKeys, setHiddenKeys] = useState<Set<string>>(new Set());
+
+  const yAxisDomain = useMemo<[number, number]>(() => {
+    let max = 0;
+    for (const row of data) {
+      for (const bar of bars) {
+        const v = Number(row[bar.dataKey] ?? 0);
+        if (v > max) {
+          max = v;
+        }
+      }
+    }
+    return [0, max];
+  }, [data, bars]);
+
+  const toggleKey = useCallback((key: string) => {
+    setHiddenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+
   return (
     <ChartContainer config={config} className={className}>
       <RechartsBarChart
@@ -77,23 +105,30 @@ export function BarChart({
             }}
           />
         )}
-        {showYAxis && (
-          <YAxis
-            tickFormatter={yAxisTickFormatter}
-            tickLine={false}
-            axisLine={false}
-            tick={{
-              fill: 'hsl(var(--foreground))',
-            }}
-          />
-        )}
+        <YAxis
+          tickFormatter={yAxisTickFormatter}
+          tickLine={false}
+          axisLine={false}
+          tick={{
+            fill: 'hsl(var(--foreground))',
+          }}
+          domain={yAxisDomain}
+          allowDataOverflow
+          hide={!showYAxis}
+        />
         {showTooltip && (
           <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
         )}
         {showLegend && (
           <ChartLegend
             verticalAlign="top"
-            content={<ChartLegendContent className={legendClassName} />}
+            content={
+              <ChartLegendContent
+                className={legendClassName}
+                onItemClick={toggleKey}
+                hiddenKeys={hiddenKeys}
+              />
+            }
           />
         )}
         {bars.map((bar) => (
@@ -103,6 +138,7 @@ export function BarChart({
             fill={`var(--color-${bar.dataKey})`}
             radius={bar.radius ?? 4}
             stackId={bar.stackId}
+            hide={hiddenKeys.has(bar.dataKey)}
           />
         ))}
       </RechartsBarChart>

packages/ui-components/src/ui/chart/chart.tsx

@@ -253,10 +253,14 @@ function ChartLegendContent({
   payload,
   verticalAlign = 'bottom',
   nameKey,
+  onItemClick,
+  hiddenKeys,
 }: React.ComponentProps<'div'> &
   Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
     hideIcon?: boolean;
     nameKey?: string;
+    onItemClick?: (dataKey: string) => void;
+    hiddenKeys?: Set<string>;
   }) {
   const { config } = useChart();
 
@@ -277,13 +281,17 @@ function ChartLegendContent({
         .map((item) => {
           const key = `${nameKey || item.dataKey || 'value'}`;
           const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const isHidden = hiddenKeys?.has(key);
 
           return (
             <div
               key={item.value}
               className={cn(
                 'flex items-center gap-1.5 text-foreground [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-foreground',
+                onItemClick && 'cursor-pointer select-none',
+                isHidden && 'opacity-40',
               )}
+              onClick={() => onItemClick?.(key)}
             >
               {itemConfig?.icon && !hideIcon ? (
                 <itemConfig.icon />