@chakra-ui/charts 3.15.0 → 3.16.0

package/dist/cjs/bar-list/bar-list.cjs

@@ -40,6 +40,7 @@ function BarListTooltip(props) {
   const { payload, labelFormatter, ...rest } = props;
   const chart = React__namespace.useContext(ChartContext);
   const formatter = labelFormatter || chart.formatNumber({ style: "decimal" });
+  if (!payload || chart.highlightedSeries !== payload.name) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.AbsoluteCenter,
     {
@@ -61,7 +62,7 @@ function BarListTooltip(props) {
   );
 }
 function BarListBar(props) {
-  const { label, showTooltip, ...rest } = props;
+  const { label, tooltip, ...rest } = props;
   const chart = React__namespace.useContext(ChartContext);
   const getPercent = (value) => chart.getValuePercent("value", value, (e) => [0, e.max]);
   const series = chart.getSeries({ name: "name" });
@@ -74,16 +75,17 @@ function BarListBar(props) {
       gap: "8",
       _hover: { bg: "bg.subtle" },
       onMouseMove: () => {
-        if (!showTooltip) return;
+        if (!tooltip) return;
         if (chart.highlightedSeries === item.name) return;
         chart.setHighlightedSeries(item.name);
       },
       onMouseLeave: () => {
-        if (!showTooltip) return;
+        if (!tooltip) return;
         chart.setHighlightedSeries(null);
       },
       children: /* @__PURE__ */ jsxRuntime.jsxs(react.Box, { pos: "relative", flex: "1", className: "group", children: [
-        showTooltip && chart.highlightedSeries === item.name && /* @__PURE__ */ jsxRuntime.jsx(BarListTooltip, { payload: item }),
+        typeof tooltip === "function" ? tooltip({ payload: item }) : null,
+        typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsxRuntime.jsx(BarListTooltip, { payload: item }),
         /* @__PURE__ */ jsxRuntime.jsx(
           react.Box,
           {

package/dist/cjs/bar-segment/bar-segment.cjs

@@ -65,11 +65,11 @@ function BarSegmentLabel(props) {
   )) });
 }
 function BarSegmentBar(props) {
-  const { showTooltip, children, ...rest } = props;
+  const { tooltip, children, ...rest } = props;
   const chart = React__namespace.useContext(ChartContext);
   const getPercent = (value) => chart.getValuePercent("value", value);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { pos: "relative", gap: "1", ...rest, children: [
-    chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    chart.data.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       react.Box,
       {
         pos: "relative",
@@ -79,13 +79,16 @@ function BarSegmentBar(props) {
         bg: item.color,
         rounded: "l1",
         onMouseMove: () => {
-          if (!showTooltip) return;
+          if (!tooltip) return;
           chart.setHighlightedSeries(item.name);
         },
         style: {
           ["--bar-percent"]: `${getPercent(item.value)}%`
         },
-        children: showTooltip && /* @__PURE__ */ jsxRuntime.jsx(BarSegmentTooltip, { payload: item })
+        children: [
+          typeof tooltip === "function" ? tooltip({ payload: item }) : null,
+          typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsxRuntime.jsx(BarSegmentTooltip, { payload: item })
+        ]
       },
       item.name
     )),
@@ -93,7 +96,7 @@ function BarSegmentBar(props) {
   ] });
 }
 function BarSegmentReference(props) {
-  const { value, label } = props;
+  const { value, label, ...rest } = props;
   const chart = React__namespace.useContext(ChartContext);
   const getPercent = (value2) => chart.getValuePercent("value", value2);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -104,6 +107,7 @@ function BarSegmentReference(props) {
       insetStart: `var(--bar-percent)`,
       bottom: "0",
       style: { ["--bar-percent"]: `${getPercent(value)}%` },
+      ...rest,
       children: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { gap: "2", h: "full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           react.Span,
@@ -168,11 +172,9 @@ function BarSegmentLegend(props) {
   ] }, item.name)) });
 }
 function BarSegmentTooltip(props) {
-  const { payload } = props;
+  const { payload, ...rest } = props;
   const chart = React__namespace.useContext(ChartContext);
   if (!payload || chart.highlightedSeries !== payload.name) return null;
-  const item = chart.data.find((d) => d.name === payload.name);
-  if (!item) return null;
   const formatter = chart.formatNumber({ maximumFractionDigits: 2 });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     react.HStack,
@@ -188,18 +190,18 @@ function BarSegmentTooltip(props) {
       gap: "1.5",
       rounded: "l2",
       shadow: "md",
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           react.ColorSwatch,
           {
-            value: chart.color(item.color),
+            value: chart.color(payload.color),
             boxSize: "0.82em",
             rounded: "full"
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: item.name }),
-        /* @__PURE__ */ jsxRuntime.jsx(react.Span, { fontFamily: "mono", fontWeight: "medium", children: formatter(item.value) })
+        /* @__PURE__ */ jsxRuntime.jsx(react.Span, { children: payload.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(react.Span, { fontFamily: "mono", fontWeight: "medium", children: formatter(payload.value) })
       ]
     }
   );

package/dist/cjs/bar-segment/namespace.cjs

@@ -11,4 +11,5 @@ exports.Label = barSegment.BarSegmentLabel;
 exports.Legend = barSegment.BarSegmentLegend;
 exports.Reference = barSegment.BarSegmentReference;
 exports.Root = barSegment.BarSegmentRoot;
+exports.Tooltip = barSegment.BarSegmentTooltip;
 exports.Value = barSegment.BarSegmentValue;

package/dist/cjs/chart/chart.cjs

@@ -8,27 +8,8 @@ var React = require('react');
 var recharts = require('recharts');
 var useChart = require('../use-chart.cjs');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const ChartContext = React__namespace.createContext({});
-const useChartContext = () => React__namespace.useContext(ChartContext);
+const ChartContext = React.createContext({});
+const useChartContext = () => React.useContext(ChartContext);
 const baseCss = react.defineStyle({
   width: "100%",
   [`& :where(${[
@@ -50,26 +31,23 @@ const baseCss = react.defineStyle({
     overflow: "visible"
   }
 });
-const ChartRoot = React__namespace.forwardRef(
-  function ChartRoot2(props, ref) {
-    const { children, css, chart, ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: chart, children: /* @__PURE__ */ jsxRuntime.jsx(
-      react.Box,
-      {
-        ref,
-        aspectRatio: "landscape",
-        textStyle: "xs",
-        css: [baseCss, css],
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { children })
-      }
-    ) });
-  }
-);
-const ChartGradient = React__namespace.forwardRef(function ChartGradient2(props, ref) {
+function ChartRoot(props) {
+  const { children, css, chart, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: chart, children: /* @__PURE__ */ jsxRuntime.jsx(
+    react.Box,
+    {
+      aspectRatio: "landscape",
+      textStyle: "xs",
+      css: [baseCss, css],
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { children })
+    }
+  ) });
+}
+function ChartGradient(props) {
   const chart = useChartContext();
   const { id, fillOpacity, stops } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", ref, children: stops.map((stop, index) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: stops.map((stop, index) => /* @__PURE__ */ jsxRuntime.jsx(
     "stop",
     {
       offset: stop.offset,
@@ -78,7 +56,7 @@ const ChartGradient = React__namespace.forwardRef(function ChartGradient2(props,
     },
     index
   )) });
-});
+}
 const hAlignMap = {
   left: "flex-start",
   center: "center",
@@ -92,7 +70,8 @@ function ChartLegend(props) {
     title,
     orientation,
     nameKey,
-    spacing = "2.5"
+    spacing = "3",
+    interaction = "hover"
   } = props;
   const chart = useChartContext();
   const filteredPayload = payload?.filter(
@@ -119,18 +98,40 @@ function ChartLegend(props) {
             flexWrap: "wrap",
             children: filteredPayload.map((item, index) => {
               const config = chart.getSeries(item);
+              const seriesName = config?.name?.toString();
               const name = useChart.getProp(item.payload, nameKey);
-              return /* @__PURE__ */ jsxRuntime.jsxs(react.HStack, { gap: "1", _icon: { boxSize: "3" }, children: [
-                config?.icon || /* @__PURE__ */ jsxRuntime.jsx(
-                  react.ColorSwatch,
-                  {
-                    boxSize: "2.5",
-                    rounded: "full",
-                    value: chart.color(config?.color)
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children: name || config?.label })
-              ] }, index);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                react.HStack,
+                {
+                  gap: "1.5",
+                  _icon: { boxSize: "3" },
+                  style: {
+                    opacity: chart.getSeriesOpacity(seriesName, 0.6)
+                  },
+                  onClick: () => {
+                    if (interaction === "click" && seriesName) {
+                      chart.setHighlightedSeries(
+                        (prev) => prev === seriesName ? null : seriesName
+                      );
+                    }
+                  },
+                  onMouseEnter: () => {
+                    if (interaction === "hover" && seriesName) {
+                      chart.setHighlightedSeries(seriesName);
+                    }
+                  },
+                  onMouseLeave: () => {
+                    if (interaction === "hover" && seriesName) {
+                      chart.setHighlightedSeries(null);
+                    }
+                  },
+                  children: [
+                    config?.icon || /* @__PURE__ */ jsxRuntime.jsx(react.ColorSwatch, { boxSize: "2", value: chart.color(config?.color) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(react.Span, { color: "fg.muted", children: name || config?.label })
+                  ]
+                },
+                index
+              );
             })
           }
         )
@@ -156,7 +157,7 @@ function ChartTooltip(props) {
     (item) => item.color !== "none" || item.type !== "none"
   );
   const total = React.useMemo(() => chart.getPayloadTotal(payload), [payload, chart]);
-  const tooltipLabel = React__namespace.useMemo(() => {
+  const tooltipLabel = React.useMemo(() => {
     const item = payload?.[0];
     const itemLabel = `${useChart.getProp(item?.payload, nameKey) || label || item?.dataKey || "value"}`;
     return labelFormatter?.(itemLabel, payload ?? []) ?? itemLabel;
@@ -233,7 +234,7 @@ function ChartTooltip(props) {
 }
 const isPolarViewBox = (viewBox) => "cx" in viewBox && "cy" in viewBox;
 function ChartRadialText(props) {
-  const { viewBox, title, description, gap = 24 } = props;
+  const { viewBox, title, description, gap = 24, fontSize = "2rem" } = props;
   const chart = useChartContext();
   if (!viewBox || !isPolarViewBox(viewBox)) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -250,7 +251,7 @@ function ChartRadialText(props) {
           {
             x: viewBox.cx,
             y: viewBox.cy,
-            style: { fontSize: "2rem", fontWeight: 600 },
+            style: { fontSize, fontWeight: 600 },
             children: title
           }
         ),

package/dist/cjs/use-chart.cjs

@@ -27,10 +27,8 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 function useChart(props) {
   const { data, series = [], sort } = props;
   const id = React__namespace.useId();
-  const [selectedSeries, setSelectedSeries] = React__namespace.useState(
-    null
-  );
   const [highlightedSeries, setHighlightedSeries] = React__namespace.useState(null);
+  const isHighlightedSeries = (name) => highlightedSeries === name;
   const env = react.useLocaleContext();
   const sys = react.useChakraContext();
   const color = (key2) => sys.token(`colors.${key2}`, key2);
@@ -93,11 +91,19 @@ function useChart(props) {
       return sort.direction === "desc" ? bValue - aValue : aValue - bValue;
     });
   }, [data, sort]);
+  const getSeriesOpacity = (name, fallback = 0.2) => {
+    if (name && highlightedSeries)
+      return isHighlightedSeries(name) ? 1 : fallback;
+  };
+  const groupByImpl = (key2) => {
+    return groupBy(data, key2);
+  };
   return {
     id,
     key,
     // series
     data: sortedData,
+    groupBy: groupByImpl,
     series,
     getSeries,
     // token functions
@@ -108,10 +114,10 @@ function useChart(props) {
     formatNumber,
     formatDate,
     // state
-    selectedSeries,
-    setSelectedSeries,
     highlightedSeries,
     setHighlightedSeries,
+    isHighlightedSeries,
+    getSeriesOpacity,
     // value functions
     getTotal,
     getMin,
@@ -125,6 +131,16 @@ function getProp(item, key) {
   if (!key || !isObject(item)) return;
   return Reflect.get(item, key);
 }
+function groupBy(data, key) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of data) {
+    const value = item[key];
+    const group = groups.get(value) || [];
+    group.push(item);
+    groups.set(value, group);
+  }
+  return Array.from(groups.values());
+}
 
 exports.getProp = getProp;
 exports.useChart = useChart;

package/dist/esm/bar-list/bar-list.js

@@ -19,6 +19,7 @@ function BarListTooltip(props) {
   const { payload, labelFormatter, ...rest } = props;
   const chart = React.useContext(ChartContext);
   const formatter = labelFormatter || chart.formatNumber({ style: "decimal" });
+  if (!payload || chart.highlightedSeries !== payload.name) return null;
   return /* @__PURE__ */ jsx(
     AbsoluteCenter,
     {
@@ -40,7 +41,7 @@ function BarListTooltip(props) {
   );
 }
 function BarListBar(props) {
-  const { label, showTooltip, ...rest } = props;
+  const { label, tooltip, ...rest } = props;
   const chart = React.useContext(ChartContext);
   const getPercent = (value) => chart.getValuePercent("value", value, (e) => [0, e.max]);
   const series = chart.getSeries({ name: "name" });
@@ -53,16 +54,17 @@ function BarListBar(props) {
       gap: "8",
       _hover: { bg: "bg.subtle" },
       onMouseMove: () => {
-        if (!showTooltip) return;
+        if (!tooltip) return;
         if (chart.highlightedSeries === item.name) return;
         chart.setHighlightedSeries(item.name);
       },
       onMouseLeave: () => {
-        if (!showTooltip) return;
+        if (!tooltip) return;
         chart.setHighlightedSeries(null);
       },
       children: /* @__PURE__ */ jsxs(Box, { pos: "relative", flex: "1", className: "group", children: [
-        showTooltip && chart.highlightedSeries === item.name && /* @__PURE__ */ jsx(BarListTooltip, { payload: item }),
+        typeof tooltip === "function" ? tooltip({ payload: item }) : null,
+        typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsx(BarListTooltip, { payload: item }),
         /* @__PURE__ */ jsx(
           Box,
           {

package/dist/esm/bar-segment/bar-segment.js

@@ -44,11 +44,11 @@ function BarSegmentLabel(props) {
   )) });
 }
 function BarSegmentBar(props) {
-  const { showTooltip, children, ...rest } = props;
+  const { tooltip, children, ...rest } = props;
   const chart = React.useContext(ChartContext);
   const getPercent = (value) => chart.getValuePercent("value", value);
   return /* @__PURE__ */ jsxs(HStack, { pos: "relative", gap: "1", ...rest, children: [
-    chart.data.map((item) => /* @__PURE__ */ jsx(
+    chart.data.map((item) => /* @__PURE__ */ jsxs(
       Box,
       {
         pos: "relative",
@@ -58,13 +58,16 @@ function BarSegmentBar(props) {
         bg: item.color,
         rounded: "l1",
         onMouseMove: () => {
-          if (!showTooltip) return;
+          if (!tooltip) return;
           chart.setHighlightedSeries(item.name);
         },
         style: {
           ["--bar-percent"]: `${getPercent(item.value)}%`
         },
-        children: showTooltip && /* @__PURE__ */ jsx(BarSegmentTooltip, { payload: item })
+        children: [
+          typeof tooltip === "function" ? tooltip({ payload: item }) : null,
+          typeof tooltip === "boolean" && tooltip && /* @__PURE__ */ jsx(BarSegmentTooltip, { payload: item })
+        ]
       },
       item.name
     )),
@@ -72,7 +75,7 @@ function BarSegmentBar(props) {
   ] });
 }
 function BarSegmentReference(props) {
-  const { value, label } = props;
+  const { value, label, ...rest } = props;
   const chart = React.useContext(ChartContext);
   const getPercent = (value2) => chart.getValuePercent("value", value2);
   return /* @__PURE__ */ jsx(
@@ -83,6 +86,7 @@ function BarSegmentReference(props) {
       insetStart: `var(--bar-percent)`,
       bottom: "0",
       style: { ["--bar-percent"]: `${getPercent(value)}%` },
+      ...rest,
       children: /* @__PURE__ */ jsxs(Flex, { gap: "2", h: "full", children: [
         /* @__PURE__ */ jsx(
           Span,
@@ -147,11 +151,9 @@ function BarSegmentLegend(props) {
   ] }, item.name)) });
 }
 function BarSegmentTooltip(props) {
-  const { payload } = props;
+  const { payload, ...rest } = props;
   const chart = React.useContext(ChartContext);
   if (!payload || chart.highlightedSeries !== payload.name) return null;
-  const item = chart.data.find((d) => d.name === payload.name);
-  if (!item) return null;
   const formatter = chart.formatNumber({ maximumFractionDigits: 2 });
   return /* @__PURE__ */ jsxs(
     HStack,
@@ -167,18 +169,18 @@ function BarSegmentTooltip(props) {
       gap: "1.5",
       rounded: "l2",
       shadow: "md",
-      ...props,
+      ...rest,
       children: [
         /* @__PURE__ */ jsx(
           ColorSwatch,
           {
-            value: chart.color(item.color),
+            value: chart.color(payload.color),
             boxSize: "0.82em",
             rounded: "full"
           }
         ),
-        /* @__PURE__ */ jsx(Span, { children: item.name }),
-        /* @__PURE__ */ jsx(Span, { fontFamily: "mono", fontWeight: "medium", children: formatter(item.value) })
+        /* @__PURE__ */ jsx(Span, { children: payload.name }),
+        /* @__PURE__ */ jsx(Span, { fontFamily: "mono", fontWeight: "medium", children: formatter(payload.value) })
       ]
     }
   );

package/dist/esm/bar-segment/namespace.js

@@ -1,2 +1,2 @@
 "use strict";
-export { BarSegmentBar as Bar, BarSegmentContent as Content, BarSegmentLabel as Label, BarSegmentLegend as Legend, BarSegmentReference as Reference, BarSegmentRoot as Root, BarSegmentValue as Value } from './bar-segment.js';
+export { BarSegmentBar as Bar, BarSegmentContent as Content, BarSegmentLabel as Label, BarSegmentLegend as Legend, BarSegmentReference as Reference, BarSegmentRoot as Root, BarSegmentTooltip as Tooltip, BarSegmentValue as Value } from './bar-segment.js';

package/dist/esm/chart/chart.js

@@ -2,13 +2,12 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { defineStyle, Box, Stack, Text, Flex, HStack, ColorSwatch, Span, Separator } from '@chakra-ui/react';
-import * as React from 'react';
-import { useMemo } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 import { ResponsiveContainer } from 'recharts';
 import { getProp } from '../use-chart.js';
 
-const ChartContext = React.createContext({});
-const useChartContext = () => React.useContext(ChartContext);
+const ChartContext = createContext({});
+const useChartContext = () => useContext(ChartContext);
 const baseCss = defineStyle({
   width: "100%",
   [`& :where(${[
@@ -30,26 +29,23 @@ const baseCss = defineStyle({
     overflow: "visible"
   }
 });
-const ChartRoot = React.forwardRef(
-  function ChartRoot2(props, ref) {
-    const { children, css, chart, ...rest } = props;
-    return /* @__PURE__ */ jsx(ChartContext.Provider, { value: chart, children: /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref,
-        aspectRatio: "landscape",
-        textStyle: "xs",
-        css: [baseCss, css],
-        ...rest,
-        children: /* @__PURE__ */ jsx(ResponsiveContainer, { children })
-      }
-    ) });
-  }
-);
-const ChartGradient = React.forwardRef(function ChartGradient2(props, ref) {
+function ChartRoot(props) {
+  const { children, css, chart, ...rest } = props;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: chart, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      aspectRatio: "landscape",
+      textStyle: "xs",
+      css: [baseCss, css],
+      ...rest,
+      children: /* @__PURE__ */ jsx(ResponsiveContainer, { children })
+    }
+  ) });
+}
+function ChartGradient(props) {
   const chart = useChartContext();
   const { id, fillOpacity, stops } = props;
-  return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", ref, children: stops.map((stop, index) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("linearGradient", { id, x1: "0", y1: "0", x2: "0", y2: "1", children: stops.map((stop, index) => /* @__PURE__ */ jsx(
     "stop",
     {
       offset: stop.offset,
@@ -58,7 +54,7 @@ const ChartGradient = React.forwardRef(function ChartGradient2(props, ref) {
     },
     index
   )) });
-});
+}
 const hAlignMap = {
   left: "flex-start",
   center: "center",
@@ -72,7 +68,8 @@ function ChartLegend(props) {
     title,
     orientation,
     nameKey,
-    spacing = "2.5"
+    spacing = "3",
+    interaction = "hover"
   } = props;
   const chart = useChartContext();
   const filteredPayload = payload?.filter(
@@ -99,18 +96,40 @@ function ChartLegend(props) {
             flexWrap: "wrap",
             children: filteredPayload.map((item, index) => {
               const config = chart.getSeries(item);
+              const seriesName = config?.name?.toString();
               const name = getProp(item.payload, nameKey);
-              return /* @__PURE__ */ jsxs(HStack, { gap: "1", _icon: { boxSize: "3" }, children: [
-                config?.icon || /* @__PURE__ */ jsx(
-                  ColorSwatch,
-                  {
-                    boxSize: "2.5",
-                    rounded: "full",
-                    value: chart.color(config?.color)
-                  }
-                ),
-                /* @__PURE__ */ jsx(Span, { color: "fg.muted", children: name || config?.label })
-              ] }, index);
+              return /* @__PURE__ */ jsxs(
+                HStack,
+                {
+                  gap: "1.5",
+                  _icon: { boxSize: "3" },
+                  style: {
+                    opacity: chart.getSeriesOpacity(seriesName, 0.6)
+                  },
+                  onClick: () => {
+                    if (interaction === "click" && seriesName) {
+                      chart.setHighlightedSeries(
+                        (prev) => prev === seriesName ? null : seriesName
+                      );
+                    }
+                  },
+                  onMouseEnter: () => {
+                    if (interaction === "hover" && seriesName) {
+                      chart.setHighlightedSeries(seriesName);
+                    }
+                  },
+                  onMouseLeave: () => {
+                    if (interaction === "hover" && seriesName) {
+                      chart.setHighlightedSeries(null);
+                    }
+                  },
+                  children: [
+                    config?.icon || /* @__PURE__ */ jsx(ColorSwatch, { boxSize: "2", value: chart.color(config?.color) }),
+                    /* @__PURE__ */ jsx(Span, { color: "fg.muted", children: name || config?.label })
+                  ]
+                },
+                index
+              );
             })
           }
         )
@@ -136,7 +155,7 @@ function ChartTooltip(props) {
     (item) => item.color !== "none" || item.type !== "none"
   );
   const total = useMemo(() => chart.getPayloadTotal(payload), [payload, chart]);
-  const tooltipLabel = React.useMemo(() => {
+  const tooltipLabel = useMemo(() => {
     const item = payload?.[0];
     const itemLabel = `${getProp(item?.payload, nameKey) || label || item?.dataKey || "value"}`;
     return labelFormatter?.(itemLabel, payload ?? []) ?? itemLabel;
@@ -213,7 +232,7 @@ function ChartTooltip(props) {
 }
 const isPolarViewBox = (viewBox) => "cx" in viewBox && "cy" in viewBox;
 function ChartRadialText(props) {
-  const { viewBox, title, description, gap = 24 } = props;
+  const { viewBox, title, description, gap = 24, fontSize = "2rem" } = props;
   const chart = useChartContext();
   if (!viewBox || !isPolarViewBox(viewBox)) return null;
   return /* @__PURE__ */ jsxs(
@@ -230,7 +249,7 @@ function ChartRadialText(props) {
           {
             x: viewBox.cx,
             y: viewBox.cy,
-            style: { fontSize: "2rem", fontWeight: 600 },
+            style: { fontSize, fontWeight: 600 },
             children: title
           }
         ),

package/dist/esm/use-chart.js

@@ -6,10 +6,8 @@ import * as React from 'react';
 function useChart(props) {
   const { data, series = [], sort } = props;
   const id = React.useId();
-  const [selectedSeries, setSelectedSeries] = React.useState(
-    null
-  );
   const [highlightedSeries, setHighlightedSeries] = React.useState(null);
+  const isHighlightedSeries = (name) => highlightedSeries === name;
   const env = useLocaleContext();
   const sys = useChakraContext();
   const color = (key2) => sys.token(`colors.${key2}`, key2);
@@ -72,11 +70,19 @@ function useChart(props) {
       return sort.direction === "desc" ? bValue - aValue : aValue - bValue;
     });
   }, [data, sort]);
+  const getSeriesOpacity = (name, fallback = 0.2) => {
+    if (name && highlightedSeries)
+      return isHighlightedSeries(name) ? 1 : fallback;
+  };
+  const groupByImpl = (key2) => {
+    return groupBy(data, key2);
+  };
   return {
     id,
     key,
     // series
     data: sortedData,
+    groupBy: groupByImpl,
     series,
     getSeries,
     // token functions
@@ -87,10 +93,10 @@ function useChart(props) {
     formatNumber,
     formatDate,
     // state
-    selectedSeries,
-    setSelectedSeries,
     highlightedSeries,
     setHighlightedSeries,
+    isHighlightedSeries,
+    getSeriesOpacity,
     // value functions
     getTotal,
     getMin,
@@ -104,5 +110,15 @@ function getProp(item, key) {
   if (!key || !isObject(item)) return;
   return Reflect.get(item, key);
 }
+function groupBy(data, key) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of data) {
+    const value = item[key];
+    const group = groups.get(value) || [];
+    group.push(item);
+    groups.set(value, group);
+  }
+  return Array.from(groups.values());
+}
 
 export { getProp, useChart };

package/dist/types/bar-list/bar-list.d.ts

@@ -19,9 +19,9 @@ export interface BarListTooltipProps extends AbsoluteCenterProps {
     payload: BarListData;
     labelFormatter?: (value: number) => React.ReactNode;
 }
-export declare function BarListTooltip(props: BarListTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function BarListTooltip(props: BarListTooltipProps): import("react/jsx-runtime").JSX.Element | null;
 export interface BarListBarProps extends StackProps {
-    showTooltip?: boolean;
+    tooltip?: boolean | ((props: BarListTooltipProps) => React.ReactNode);
     label?: (props: {
         payload: BarListData;
         index: number;

package/dist/types/bar-segment/bar-segment.d.ts

@@ -1,4 +1,4 @@
-import type { StackProps, Tokens } from "@chakra-ui/react";
+import type { BoxProps, StackProps, Tokens } from "@chakra-ui/react";
 import * as React from "react";
 import type { UseChartReturn } from "../use-chart";
 export interface BarSegmentData {
@@ -18,10 +18,10 @@ export interface BarSegmentLabelProps extends StackProps {
 }
 export declare function BarSegmentLabel(props: BarSegmentLabelProps): import("react/jsx-runtime").JSX.Element;
 export interface BarSegmentBarProps extends StackProps {
-    showTooltip?: boolean;
+    tooltip?: boolean | ((props: BarSegmentTooltipProps) => React.ReactNode);
 }
 export declare function BarSegmentBar(props: BarSegmentBarProps): import("react/jsx-runtime").JSX.Element;
-export interface BarSegmentReferenceProps {
+export interface BarSegmentReferenceProps extends BoxProps {
     value: number;
     label?: React.ReactNode;
 }
@@ -35,7 +35,7 @@ export interface BarSegmentLegendProps extends StackProps {
     valueFormatter?: (value: number) => string;
 }
 export declare function BarSegmentLegend(props: BarSegmentLegendProps): import("react/jsx-runtime").JSX.Element;
-export interface BarSegmentTooltipProps {
+export interface BarSegmentTooltipProps extends StackProps {
     payload: BarSegmentData;
 }
 export declare function BarSegmentTooltip(props: BarSegmentTooltipProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/bar-segment/namespace.d.ts

@@ -1,2 +1,2 @@
-export { BarSegmentBar as Bar, BarSegmentContent as Content, BarSegmentLabel as Label, BarSegmentRoot as Root, BarSegmentValue as Value, BarSegmentLegend as Legend, BarSegmentReference as Reference, } from "./bar-segment";
+export { BarSegmentBar as Bar, BarSegmentContent as Content, BarSegmentLabel as Label, BarSegmentRoot as Root, BarSegmentValue as Value, BarSegmentLegend as Legend, BarSegmentReference as Reference, BarSegmentTooltip as Tooltip, } from "./bar-segment";
 export type { BarSegmentData as Data, BarSegmentLegendProps as LegendProps, BarSegmentRootProps as RootProps, BarSegmentValueProps as ValueProps, BarSegmentReferenceProps as ReferenceProps, BarSegmentBarProps as BarProps, BarSegmentLabelProps as LabelProps, BarSegmentTooltipProps as TooltipProps, } from "./bar-segment";

package/dist/types/chart/chart.d.ts

@@ -1,14 +1,13 @@
 import type { BoxProps } from "@chakra-ui/react";
-import * as React from "react";
 import type { LegendProps, TooltipProps } from "recharts";
 import type { Payload } from "recharts/types/component/DefaultTooltipContent";
 import type { ViewBox } from "recharts/types/util/types";
 import { type ChartColor, type UseChartReturn } from "../use-chart";
-export interface ChartRootProps extends BoxProps {
+export interface ChartRootProps<T> extends BoxProps {
     children: React.ReactElement;
-    chart: UseChartReturn<unknown>;
+    chart: UseChartReturn<T>;
 }
-export declare const ChartRoot: React.ForwardRefExoticComponent<ChartRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare function ChartRoot<T>(props: ChartRootProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface ChartGradientProps {
     id: string;
     fillOpacity?: number;
@@ -18,10 +17,11 @@ export interface ChartGradientProps {
         opacity?: number;
     }[];
 }
-export declare const ChartGradient: React.ForwardRefExoticComponent<ChartGradientProps & React.RefAttributes<SVGLinearGradientElement>>;
+export declare function ChartGradient(props: ChartGradientProps): import("react/jsx-runtime").JSX.Element;
 export interface ChartLegendProps extends LegendProps {
     title?: React.ReactNode;
     nameKey?: string;
+    interaction?: "hover" | "click";
 }
 export declare function ChartLegend(props: ChartLegendProps): import("react/jsx-runtime").JSX.Element | null;
 export interface ChartTooltipProps extends TooltipProps<string, string> {
@@ -40,5 +40,6 @@ export interface ChartRadialTextProps {
     title: React.ReactNode;
     description: React.ReactNode;
     gap?: number;
+    fontSize?: string;
 }
 export declare function ChartRadialText(props: ChartRadialTextProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/use-chart.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 export type ChartColor = Tokens["colors"] | React.CSSProperties["color"];
 export type ChartSize = Tokens["sizes"] | (string & {});
 export type ChartSpacing = Tokens["spacing"] | (string & {});
-type ItemDataKey<T> = T extends Array<infer U> ? keyof U : keyof T;
+type ItemDataKey<T> = keyof T;
 interface SeriesItem<T> {
     name?: ItemDataKey<T>;
     color?: ChartColor;
@@ -18,7 +18,7 @@ export interface UseChartProps<T> {
     data: T[];
     series?: SeriesItem<T>[];
     sort?: {
-        by: keyof T;
+        by: ItemDataKey<T>;
         direction: "asc" | "desc";
     };
 }
@@ -26,10 +26,11 @@ type ValueDomain = [number, number] | ((props: {
     min: number;
     max: number;
 }) => [number, number]);
-export declare function useChart<T>(props: UseChartProps<T>): {
+export declare function useChart<T = any>(props: UseChartProps<T>): {
     id: string;
     key: <K extends ItemDataKey<T>>(prop: K | undefined) => K;
     data: T[];
+    groupBy: (key: ItemDataKey<T>) => T[][];
     series: SeriesItem<T>[];
     getSeries: (item: unknown) => SeriesItem<T> | undefined;
     color: (key: ChartColor | undefined) => any;
@@ -37,10 +38,10 @@ export declare function useChart<T>(props: UseChartProps<T>): {
     spacing: (key: ChartSpacing | undefined) => any;
     formatNumber: (options?: Intl.NumberFormatOptions) => (value: number) => string;
     formatDate: (options?: Intl.DateTimeFormatOptions) => (value: string) => string;
-    selectedSeries: string | null;
-    setSelectedSeries: React.Dispatch<React.SetStateAction<string | null>>;
     highlightedSeries: string | null;
     setHighlightedSeries: React.Dispatch<React.SetStateAction<string | null>>;
+    isHighlightedSeries: (name: string | undefined) => boolean;
+    getSeriesOpacity: (name: string | undefined, fallback?: number) => number | undefined;
     getTotal: (key: keyof T) => number;
     getMin: (key: keyof T) => number;
     getMax: (key: keyof T) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/charts",
-  "version": "3.15.0",
+  "version": "3.16.0",
   "description": "Data visualization components for Chakra UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -43,10 +43,10 @@
     "./package.json": "./package.json"
   },
   "devDependencies": {
-    "recharts": "2.13.3",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "@chakra-ui/react": "3.15.0"
+    "recharts": "2.15.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "@chakra-ui/react": "3.16.0"
   },
   "peerDependencies": {
     "@chakra-ui/react": ">=3",