@classic-homes/charts-react 0.1.37 → 0.2.0

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(index_exports, {
   ChartContainer: () => ChartContainer,
   ChartEmpty: () => ChartEmpty,
   ChartError: () => ChartError,
+  ChartLegend: () => ChartLegend,
   ChartSkeleton: () => ChartSkeleton,
   DonutChart: () => DonutChart,
   FunnelChart: () => FunnelChart,
@@ -50,6 +51,7 @@ __export(index_exports, {
   cn: () => cn,
   registerClassicThemes: () => registerClassicThemes,
   useChart: () => useChart,
+  useChartLegend: () => useChartLegend,
   useChartResize: () => useChartResize,
   useChartTheme: () => useChartTheme,
   useReducedMotion: () => useReducedMotion
@@ -135,10 +137,11 @@ var ChartError = React2.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-2 text-sm font-medium text-destructive", children: message }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mb-2 text-sm font-medium text-foreground", children: message }),
           onRetry && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             "button",
             {
+              type: "button",
               onClick: onRetry,
               className: "rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90",
               children: "Retry"
@@ -210,10 +213,13 @@ var ChartContainer = React4.forwardRef(
     onRetry,
     className,
     wrapperClassName,
+    legend,
+    legendPosition = "bottom",
     children,
     ...props
   }, ref) => {
     const heightStyle = typeof height === "number" ? `${height}px` : height;
+    const descriptionId = `${React4.useId()}-desc`;
     if (loading) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartSkeleton, { height, className: wrapperClassName });
     }
@@ -231,37 +237,109 @@ var ChartContainer = React4.forwardRef(
     if (empty) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    const chart = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
         ref,
         role: "img",
         "aria-label": title,
-        "aria-describedby": description ? `${title}-desc` : void 0,
+        "aria-describedby": description ? descriptionId : void 0,
         "data-testid": "chart-container",
-        className: cn("rounded-lg border border-border bg-card", wrapperClassName),
+        className: legend ? "min-h-0 min-w-0 flex-1" : cn("rounded-lg border border-border bg-card", wrapperClassName),
         ...props,
         children: [
-          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: `${title}-desc`, className: "sr-only", children: description }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { id: descriptionId, className: "sr-only", children: description }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
         ]
       }
     );
+    if (!legend) return chart;
+    const side = legendPosition === "left" || legendPosition === "right";
+    const leading = legendPosition === "top" || legendPosition === "left";
+    const legendNode = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "div",
+      {
+        "data-testid": "chart-legend",
+        className: cn("flex shrink-0 p-2", side ? "items-center" : "justify-center"),
+        children: legend
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        className: cn(
+          "flex rounded-lg border border-border bg-card",
+          side ? "flex-row" : "flex-col",
+          wrapperClassName
+        ),
+        children: [
+          leading && legendNode,
+          chart,
+          !leading && legendNode
+        ]
+      }
+    );
   }
 );
 ChartContainer.displayName = "ChartContainer";
 
-// src/components/core/LineChart.tsx
+// src/components/base/ChartLegend.tsx
 var React5 = __toESM(require("react"), 1);
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ChartLegend = React5.forwardRef(
+  ({ items, toggle, position = "bottom", chartTitle, orientation, className }, ref) => {
+    const vertical = (orientation ?? (position === "left" || position === "right" ? "vertical" : "horizontal")) === "vertical";
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "ul",
+      {
+        ref,
+        "aria-label": chartTitle ? `${chartTitle} legend` : "Chart legend",
+        className: cn(
+          "flex gap-1 text-sm",
+          vertical ? "flex-col" : "flex-wrap justify-center",
+          className
+        ),
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": item.visible,
+            onClick: () => toggle(item.name),
+            className: cn(
+              "inline-flex items-center gap-2 rounded-md px-2 py-1 text-left hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              item.visible ? "text-foreground" : "text-muted-foreground line-through"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "h-3 w-3 shrink-0 rounded-sm",
+                  style: { backgroundColor: item.color, opacity: item.visible ? 1 : 0.35 }
+                }
+              ),
+              item.name
+            ]
+          }
+        ) }, item.name))
+      }
+    );
+  }
+);
+ChartLegend.displayName = "ChartLegend";
+
+// src/components/core/LineChart.tsx
+var React6 = __toESM(require("react"), 1);
 var echarts3 = __toESM(require("echarts/core"), 1);
 var import_charts = require("echarts/charts");
 var import_components = require("echarts/components");
 var import_renderers = require("echarts/renderers");
-var import_charts_core2 = require("@classic-homes/charts-core");
+var import_charts_core4 = require("@classic-homes/charts-core");
 
 // src/hooks/useChart.ts
 var import_react4 = require("react");
 var echarts2 = __toESM(require("echarts/core"), 1);
+var import_charts_core2 = require("@classic-homes/charts-core");
 
 // src/hooks/useChartTheme.ts
 var import_react = require("react");
@@ -274,18 +352,18 @@ function registerClassicThemes() {
   echarts.registerTheme(import_charts_core.THEME_DARK, import_charts_core.darkTheme);
   themesRegistered = true;
 }
+function resolveTheme(preference) {
+  if (preference !== "auto") {
+    return preference === "dark" ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT;
+  }
+  if (typeof document === "undefined") return import_charts_core.THEME_LIGHT;
+  return document.documentElement.classList.contains("dark") ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT;
+}
 function useChartTheme(preference = "auto") {
-  const [currentTheme, setCurrentTheme] = (0, import_react.useState)(import_charts_core.THEME_LIGHT);
-  const updateTheme = (0, import_react.useCallback)(() => {
-    if (preference !== "auto") {
-      setCurrentTheme(preference === "dark" ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT);
-      return;
-    }
-    const isDark = document.documentElement.classList.contains("dark");
-    setCurrentTheme(isDark ? import_charts_core.THEME_DARK : import_charts_core.THEME_LIGHT);
-  }, [preference]);
+  const [currentTheme, setCurrentTheme] = (0, import_react.useState)(() => resolveTheme(preference));
   (0, import_react.useEffect)(() => {
     registerClassicThemes();
+    const updateTheme = () => setCurrentTheme(resolveTheme(preference));
     updateTheme();
     if (preference !== "auto") return;
     const observer = new MutationObserver((mutations) => {
@@ -299,26 +377,29 @@ function useChartTheme(preference = "auto") {
       attributes: true,
       attributeFilter: ["class"]
     });
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleMediaChange = () => updateTheme();
-    mediaQuery.addEventListener("change", handleMediaChange);
     return () => {
       observer.disconnect();
-      mediaQuery.removeEventListener("change", handleMediaChange);
     };
-  }, [preference, updateTheme]);
+  }, [preference]);
   return currentTheme;
 }
 
 // src/hooks/useChartResize.ts
 var import_react2 = require("react");
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? import_react2.useEffect : import_react2.useLayoutEffect;
+function useRefElement(ref) {
+  const [element, setElement] = (0, import_react2.useState)(null);
+  useIsomorphicLayoutEffect(() => {
+    setElement(ref.current);
+  });
+  return element;
+}
 function useChartResize(chartRef, containerRef) {
-  const resizeObserverRef = (0, import_react2.useRef)(null);
+  const container = useRefElement(containerRef);
   (0, import_react2.useEffect)(() => {
-    const container = containerRef.current;
     if (!container) return;
     let resizeTimeout;
-    resizeObserverRef.current = new ResizeObserver(() => {
+    const observer = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
         const chart = chartRef.current;
@@ -327,12 +408,12 @@ function useChartResize(chartRef, containerRef) {
         }
       }, 100);
     });
-    resizeObserverRef.current.observe(container);
+    observer.observe(container);
     return () => {
       clearTimeout(resizeTimeout);
-      resizeObserverRef.current?.disconnect();
+      observer.disconnect();
     };
-  }, [chartRef, containerRef]);
+  }, [chartRef, container]);
 }
 
 // src/hooks/useReducedMotion.ts
@@ -354,7 +435,13 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
-var SET_OPTION_OPTS = { notMerge: false, lazyUpdate: true };
+var isComponentType = (mainType) => echarts2.ComponentModel.hasClass(mainType);
+function applyOption(chart, prev, next) {
+  chart.setOption(next, {
+    replaceMerge: (0, import_charts_core2.getReplaceMerge)(prev, next, isComponentType),
+    lazyUpdate: true
+  });
+}
 function useChart({
   option,
   theme = "auto",
@@ -362,6 +449,7 @@ function useChart({
   onReady
 }) {
   const containerRef = (0, import_react4.useRef)(null);
+  const container = useRefElement(containerRef);
   const chartRef = (0, import_react4.useRef)(null);
   const currentTheme = useChartTheme(theme);
   const reducedMotion = useReducedMotion();
@@ -370,13 +458,16 @@ function useChart({
   const optionRef = (0, import_react4.useRef)(option);
   optionRef.current = {
     ...option,
-    animation: animation ?? !reducedMotion
+    // Reduced motion always wins over the animation prop
+    animation: (animation ?? true) && !reducedMotion
   };
+  const appliedRef = (0, import_react4.useRef)(null);
   (0, import_react4.useEffect)(() => {
-    if (!containerRef.current) return;
-    const chart = echarts2.init(containerRef.current, currentTheme);
+    if (!container) return;
+    const chart = echarts2.init(container, currentTheme);
     chartRef.current = chart;
-    chart.setOption(optionRef.current, SET_OPTION_OPTS);
+    applyOption(chart, null, optionRef.current);
+    appliedRef.current = optionRef.current;
     onReadyRef.current?.(chart);
     return () => {
       chart.dispose();
@@ -384,11 +475,12 @@ function useChart({
         chartRef.current = null;
       }
     };
-  }, [currentTheme]);
+  }, [container, currentTheme]);
   (0, import_react4.useEffect)(() => {
     const chart = chartRef.current;
     if (!chart || chart.isDisposed()) return;
-    chart.setOption(optionRef.current, SET_OPTION_OPTS);
+    applyOption(chart, appliedRef.current, optionRef.current);
+    appliedRef.current = optionRef.current;
   }, [option, animation, reducedMotion]);
   useChartResize(chartRef, containerRef);
   return {
@@ -398,8 +490,74 @@ function useChart({
   };
 }
 
+// src/hooks/useChartLegend.ts
+var import_react6 = require("react");
+var import_charts_core3 = require("@classic-homes/charts-core");
+
+// src/hooks/useLatestRef.ts
+var import_react5 = require("react");
+function useLatestRef(value) {
+  const ref = (0, import_react5.useRef)(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useChartLegend.ts
+var LEGEND_EVENTS = [
+  "legendselectchanged",
+  "legendselected",
+  "legendunselected",
+  "legendselectall",
+  "legendinverseselect"
+];
+function useChartLegend({
+  names,
+  colors,
+  palette,
+  config,
+  title,
+  onLegendChange
+}) {
+  const chartRef = (0, import_react6.useRef)(null);
+  const [visible, setVisible] = (0, import_react6.useState)({});
+  const latest = useLatestRef({ onLegendChange });
+  const attach = (0, import_react6.useCallback)(
+    (chart) => {
+      chartRef.current = chart;
+      setVisible({});
+      const handler = (params) => {
+        const selected = { ...params.selected };
+        setVisible(selected);
+        latest.current.onLegendChange?.(selected);
+      };
+      for (const event of LEGEND_EVENTS) chart.on(event, handler);
+    },
+    [latest]
+  );
+  const dispatch = (action) => {
+    const chart = chartRef.current;
+    if (chart && !chart.isDisposed()) chart.dispatchAction(action);
+  };
+  return {
+    attach,
+    renderProps: {
+      items: (0, import_charts_core3.getLegendItems)(names, palette, colors, visible),
+      position: config?.position ?? "bottom",
+      chartTitle: title,
+      toggle: (name) => dispatch({ type: "legendToggleSelect", name }),
+      setVisible: (name, show) => dispatch({ type: show ? "legendSelect" : "legendUnSelect", name }),
+      showOnly: (name) => {
+        for (const other of names) {
+          dispatch({ type: other === name ? "legendSelect" : "legendUnSelect", name: other });
+        }
+      },
+      showAll: () => dispatch({ type: "legendAllSelect" })
+    }
+  };
+}
+
 // src/components/core/LineChart.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 echarts3.use([
   import_charts.LineChart,
   import_components.GridComponent,
@@ -408,7 +566,7 @@ echarts3.use([
   import_components.TitleComponent,
   import_renderers.CanvasRenderer
 ]);
-var LineChart = React5.forwardRef(
+var LineChart = React6.forwardRef(
   ({
     title,
     description,
@@ -426,63 +584,110 @@ var LineChart = React5.forwardRef(
     areaFilled = false,
     showDataPoints = false,
     stacked = false,
+    showLabels = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
-    const option = React5.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core4.getChartColors)(currentTheme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: chartColors.series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React6.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985"
+      const getLabel = (0, import_charts_core4.seriesLabelLookup)(data.series);
+      const showSymbol = showDataPoints || showLabels || (0, import_charts_core4.hasPointLabels)(data.series);
+      return (0, import_charts_core4.mergeChartOption)(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...(0, import_charts_core4.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: (0, import_charts_core4.buildTooltip)(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: chartColors.axisPointerLabel
+                }
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
             }
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: data.categories,
-          splitLine: {
-            show: showGrid
-          }
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
+          ),
+          legend: (0, import_charts_core4.buildLegend)(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: (0, import_charts_core4.buildAxis)(
+            {
+              type: "category",
+              boundaryGap: false,
+              data: data.categories,
+              splitLine: {
+                show: showGrid
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: (0, import_charts_core4.buildAxis)(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            yAxisConfig
+          ),
+          series: data.series.map((series) => ({
+            name: series.name,
+            type: "line",
+            data: (0, import_charts_core4.withPointLabels)(series.data, series.labels, labelFormatter, { position: "top" }),
+            smooth,
+            showSymbol,
+            symbolSize: showDataPoints ? 6 : 0,
+            stack: stacked ? "Total" : void 0,
+            areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
+            itemStyle: series.color ? { color: series.color } : void 0,
+            label: (0, import_charts_core4.buildDataLabel)({ show: true, position: "top" }, void 0, {
+              show: showLabels,
+              formatter: labelFormatter,
+              getLabel
+            }),
+            emphasis: {
+              focus: "series"
+            }
+          }))
         },
-        series: data.series.map((series) => ({
-          name: series.name,
-          type: "line",
-          data: series.data,
-          smooth,
-          showSymbol: showDataPoints,
-          symbolSize: showDataPoints ? 6 : 0,
-          stack: stacked ? "Total" : void 0,
-          areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
-          itemStyle: series.color ? { color: series.color } : void 0,
-          emphasis: {
-            focus: "series"
-          }
-        }))
-      };
+        optionOverride
+      );
     }, [
       data,
       isEmpty,
@@ -492,45 +697,57 @@ var LineChart = React5.forwardRef(
       smooth,
       areaFilled,
       showDataPoints,
-      stacked
+      stacked,
+      chartColors,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
+    const latest = useLatestRef({ onClick, onHover });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core4.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
-        if (onHover) {
-          chart.on("mouseover", (params) => {
-            onHover({
-              type: params.type || "mouseover",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        });
+        chart.on("mouseover", (params) => {
+          const { onHover: onHover2 } = latest.current;
+          if (!onHover2) return;
+          onHover2({
+            type: params.type || "mouseover",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core2.generateLineChartDescription)(title, data) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.generateLineChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ChartContainer,
       {
         ref,
@@ -542,8 +759,10 @@ var LineChart = React5.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -551,13 +770,13 @@ var LineChart = React5.forwardRef(
 LineChart.displayName = "LineChart";
 
 // src/components/core/BarChart.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var echarts4 = __toESM(require("echarts/core"), 1);
 var import_charts2 = require("echarts/charts");
 var import_components2 = require("echarts/components");
 var import_renderers2 = require("echarts/renderers");
-var import_charts_core3 = require("@classic-homes/charts-core");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_charts_core5 = require("@classic-homes/charts-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 echarts4.use([
   import_charts2.BarChart,
   import_components2.GridComponent,
@@ -566,7 +785,7 @@ echarts4.use([
   import_components2.TitleComponent,
   import_renderers2.CanvasRenderer
 ]);
-var BarChart = React6.forwardRef(
+var BarChart = React7.forwardRef(
   ({
     title,
     description,
@@ -583,13 +802,32 @@ var BarChart = React6.forwardRef(
     orientation = "vertical",
     stacked = false,
     showValues = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
     const isHorizontal = orientation === "horizontal";
-    const option = React6.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: (0, import_charts_core5.getChartColors)(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React7.useMemo(() => {
       if (isEmpty) return {};
       const categoryAxis = {
         type: "category",
@@ -604,64 +842,103 @@ var BarChart = React6.forwardRef(
           show: showGrid
         }
       };
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
+      const getLabel = (0, import_charts_core5.seriesLabelLookup)(data.series);
+      return (0, import_charts_core5.mergeChartOption)(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...(0, import_charts_core5.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: (0, import_charts_core5.buildTooltip)(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "shadow"
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
+            }
+          ),
+          legend: (0, import_charts_core5.buildLegend)(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: (0, import_charts_core5.buildAxis)(isHorizontal ? valueAxis : categoryAxis, xAxisConfig),
+          yAxis: (0, import_charts_core5.buildAxis)(isHorizontal ? categoryAxis : valueAxis, yAxisConfig),
+          series: data.series.map((series) => ({
+            name: series.name,
+            type: "bar",
+            data: (0, import_charts_core5.withPointLabels)(series.data, series.labels, labelFormatter, {
+              position: isHorizontal ? "right" : "top"
+            }),
+            stack: stacked ? "Total" : void 0,
+            itemStyle: series.color ? { color: series.color } : void 0,
+            label: (0, import_charts_core5.buildDataLabel)(
+              {
+                show: true,
+                position: isHorizontal ? "right" : "top"
+              },
+              void 0,
+              { show: showValues, formatter: labelFormatter, getLabel }
+            ),
+            emphasis: {
+              focus: "series"
+            }
+          }))
         },
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow"
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: isHorizontal ? valueAxis : categoryAxis,
-        yAxis: isHorizontal ? categoryAxis : valueAxis,
-        series: data.series.map((series) => ({
-          name: series.name,
-          type: "bar",
-          data: series.data,
-          stack: stacked ? "Total" : void 0,
-          itemStyle: series.color ? { color: series.color } : void 0,
-          label: showValues ? {
-            show: true,
-            position: isHorizontal ? "right" : "top"
-          } : void 0,
-          emphasis: {
-            focus: "series"
-          }
-        }))
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, isHorizontal, stacked, showValues]);
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      isHorizontal,
+      stacked,
+      showValues,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core3.generateBarChartDescription)(title, data) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.generateBarChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChartContainer,
       {
         ref,
@@ -673,8 +950,10 @@ var BarChart = React6.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -682,15 +961,15 @@ var BarChart = React6.forwardRef(
 BarChart.displayName = "BarChart";
 
 // src/components/core/PieChart.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var echarts5 = __toESM(require("echarts/core"), 1);
 var import_charts3 = require("echarts/charts");
 var import_components3 = require("echarts/components");
 var import_renderers3 = require("echarts/renderers");
-var import_charts_core4 = require("@classic-homes/charts-core");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_charts_core6 = require("@classic-homes/charts-core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 echarts5.use([import_charts3.PieChart, import_components3.TooltipComponent, import_components3.LegendComponent, import_components3.TitleComponent, import_renderers3.CanvasRenderer]);
-var PieChart = React7.forwardRef(
+var PieChart = React8.forwardRef(
   ({
     title,
     description,
@@ -706,73 +985,123 @@ var PieChart = React7.forwardRef(
     showLabels = true,
     labelPosition = "outside",
     innerRadius = 0,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React7.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.map((d) => d.name) ?? [],
+      colors: data?.map((d) => d.color) ?? [],
+      palette: (0, import_charts_core6.getChartColors)(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React8.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        } : void 0,
-        legend: showLegend ? {
-          orient: "horizontal",
-          bottom: 0,
-          data: data.map((d) => d.name)
-        } : void 0,
-        series: [
-          {
-            name: title,
-            type: "pie",
-            radius: innerRadius === 0 ? "70%" : ["50%", "70%"],
-            center: ["50%", "45%"],
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : void 0
-            })),
-            label: showLabels ? {
-              show: true,
-              position: labelPosition,
-              formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
-            } : {
-              show: false
-            },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${(0, import_charts_core6.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core6.escapeHtml)(p.name)}: ${(0, import_charts_core6.escapeHtml)((0, import_charts_core6.formatTooltipValue)(p.value, valueFormatter))} (${p.percent}%)`;
+        } : "{a} <br/>{b}: {c} ({d}%)"
+      };
+      return (0, import_charts_core6.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core6.buildTooltip)(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel: (0, import_charts_core6.itemLabelLookup)(data)
+          }),
+          legend: (0, import_charts_core6.buildLegend)(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
+          ),
+          series: [
+            {
+              name: title,
+              type: "pie",
+              radius: innerRadius ? [innerRadius, "70%"] : "70%",
+              center: (0, import_charts_core6.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]),
+              data: data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : void 0,
+                label: (0, import_charts_core6.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+              })),
+              label: (0, import_charts_core6.buildDataLabel)(
+                {
+                  show: true,
+                  position: labelPosition,
+                  formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel: (0, import_charts_core6.itemLabelLookup)(data) }
+              ),
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
               }
             }
-          }
-        ]
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showLabels, labelPosition, innerRadius, title]);
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showLabels,
+      labelPosition,
+      innerRadius,
+      title,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              percent: params.percent,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            percent: params.percent,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.generatePieChartDescription)(title, data, false) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generatePieChartDescription)(title, data, false) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ChartContainer,
       {
         ref,
@@ -784,8 +1113,10 @@ var PieChart = React7.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -793,12 +1124,13 @@ var PieChart = React7.forwardRef(
 PieChart.displayName = "PieChart";
 
 // src/components/core/AreaChart.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var echarts6 = __toESM(require("echarts/core"), 1);
 var import_charts4 = require("echarts/charts");
 var import_components4 = require("echarts/components");
 var import_renderers4 = require("echarts/renderers");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_charts_core7 = require("@classic-homes/charts-core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 echarts6.use([
   import_charts4.LineChart,
   import_components4.GridComponent,
@@ -807,7 +1139,7 @@ echarts6.use([
   import_components4.TitleComponent,
   import_renderers4.CanvasRenderer
 ]);
-var AreaChart = React8.forwardRef(
+var AreaChart = React9.forwardRef(
   ({
     title,
     description,
@@ -824,94 +1156,161 @@ var AreaChart = React8.forwardRef(
     smooth = false,
     stacked = false,
     gradient = true,
+    showLabels = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
-    const option = React8.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core7.getChartColors)(currentTheme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: chartColors.series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React9.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            label: {
-              backgroundColor: "#6a7985"
+      const getLabel = (0, import_charts_core7.seriesLabelLookup)(data.series);
+      const showSymbol = showLabels || (0, import_charts_core7.hasPointLabels)(data.series);
+      return (0, import_charts_core7.mergeChartOption)(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...(0, import_charts_core7.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: (0, import_charts_core7.buildTooltip)(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross",
+                label: {
+                  backgroundColor: chartColors.axisPointerLabel
+                }
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
             }
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: data.categories
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
-        },
-        series: data.series.map((series, index) => ({
-          name: series.name,
-          type: "line",
-          data: series.data,
-          smooth,
-          stack: stacked ? "Total" : void 0,
-          areaStyle: gradient ? {
-            opacity: 0.8,
-            color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
-              {
-                offset: 0,
-                color: series.color || `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.8)`
-              },
-              {
-                offset: 1,
-                color: series.color || `rgba(${60 + index * 40}, ${160 - index * 20}, ${180 - index * 30}, 0.1)`
+          ),
+          legend: (0, import_charts_core7.buildLegend)(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: (0, import_charts_core7.buildAxis)(
+            {
+              type: "category",
+              boundaryGap: false,
+              data: data.categories
+            },
+            xAxisConfig
+          ),
+          yAxis: (0, import_charts_core7.buildAxis)(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
               }
-            ])
-          } : { opacity: 0.5 },
-          itemStyle: series.color ? { color: series.color } : void 0,
-          emphasis: {
-            focus: "series"
-          },
-          showSymbol: false
-        }))
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient]);
+            },
+            yAxisConfig
+          ),
+          series: data.series.map((series, index) => {
+            const base = series.color || chartColors.series[index % chartColors.series.length];
+            return {
+              name: series.name,
+              type: "line",
+              data: (0, import_charts_core7.withPointLabels)(series.data, series.labels, labelFormatter, {
+                position: "top"
+              }),
+              smooth,
+              stack: stacked ? "Total" : void 0,
+              areaStyle: gradient ? {
+                opacity: 0.8,
+                color: new echarts6.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: (0, import_charts_core7.colorWithAlpha)(base, 0.8) },
+                  { offset: 1, color: (0, import_charts_core7.colorWithAlpha)(base, 0.1) }
+                ])
+              } : { opacity: 0.5 },
+              itemStyle: series.color ? { color: series.color } : void 0,
+              label: (0, import_charts_core7.buildDataLabel)({ show: true, position: "top" }, void 0, {
+                show: showLabels,
+                formatter: labelFormatter,
+                getLabel
+              }),
+              emphasis: {
+                focus: "series"
+              },
+              showSymbol
+            };
+          })
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      smooth,
+      stacked,
+      gradient,
+      chartColors,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core7.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Area chart with ${data.categories.length} data points across ${data.series.length} series.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ChartContainer,
       {
         ref,
@@ -923,8 +1322,10 @@ var AreaChart = React8.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -932,22 +1333,24 @@ var AreaChart = React8.forwardRef(
 AreaChart.displayName = "AreaChart";
 
 // src/components/core/ScatterChart.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var echarts7 = __toESM(require("echarts/core"), 1);
 var import_charts5 = require("echarts/charts");
 var import_components5 = require("echarts/components");
 var import_renderers5 = require("echarts/renderers");
-var import_charts_core5 = require("@classic-homes/charts-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_charts_core8 = require("@classic-homes/charts-core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 echarts7.use([
   import_charts5.ScatterChart,
+  // Trend lines are line series
+  import_charts5.LineChart,
   import_components5.GridComponent,
   import_components5.TooltipComponent,
   import_components5.LegendComponent,
   import_components5.TitleComponent,
   import_renderers5.CanvasRenderer
 ]);
-var ScatterChart = React9.forwardRef(
+var ScatterChart = React10.forwardRef(
   ({
     title,
     description,
@@ -963,19 +1366,45 @@ var ScatterChart = React9.forwardRef(
     showGrid = true,
     showTrendLine = false,
     symbolSize = 10,
+    showLabels = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.series?.length || data.series.every((s) => !s.data?.length);
-    const option = React9.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: (0, import_charts_core8.getChartColors)(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React10.useMemo(() => {
       if (isEmpty) return {};
+      const getLabel = (0, import_charts_core8.seriesLabelLookup)(data.series);
       const series = data.series.map((s) => ({
         name: s.name,
         type: "scatter",
-        data: s.data,
+        data: (0, import_charts_core8.withPointLabels)(s.data, s.labels, labelFormatter, { position: "top" }),
         symbolSize: typeof symbolSize === "function" ? symbolSize : symbolSize,
         itemStyle: s.color ? { color: s.color } : void 0,
+        label: (0, import_charts_core8.buildDataLabel)({ show: true, position: "top" }, void 0, {
+          show: showLabels,
+          formatter: labelFormatter,
+          getLabel
+        }),
         emphasis: {
           focus: "series",
           itemStyle: {
@@ -997,9 +1426,12 @@ var ScatterChart = React9.forwardRef(
           });
           const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
           const intercept = (sumY - slope * sumX) / n;
-          const xValues = s.data.map(([x]) => x);
-          const minX = Math.min(...xValues);
-          const maxX = Math.max(...xValues);
+          let minX = Infinity;
+          let maxX = -Infinity;
+          for (const [x] of s.data) {
+            if (x < minX) minX = x;
+            if (x > maxX) maxX = x;
+          }
           series.push({
             name: `${s.name} Trend`,
             type: "line",
@@ -1020,63 +1452,103 @@ var ScatterChart = React9.forwardRef(
           });
         });
       }
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
-        },
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: (params) => {
-            const p = params;
-            if (!p.value) return "";
-            return `${p.seriesName}<br/>X: ${p.value[0]}<br/>Y: ${p.value[1]}`;
-          }
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        xAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
-        },
-        yAxis: {
-          type: "value",
-          splitLine: {
-            show: showGrid
-          }
-        },
-        series
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, showTrendLine, symbolSize]);
+      return (0, import_charts_core8.mergeChartOption)(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...(0, import_charts_core8.gridInset)(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: (0, import_charts_core8.buildTooltip)(
+            {
+              trigger: "item",
+              formatter: (params) => {
+                const p = params;
+                if (!p.value) return "";
+                const x = (0, import_charts_core8.formatTooltipValue)(p.value[0], tooltipValueFormatter);
+                const y = (0, import_charts_core8.formatTooltipValue)(p.value[1], tooltipValueFormatter);
+                return `${(0, import_charts_core8.escapeHtml)(p.seriesName)}<br/>X: ${(0, import_charts_core8.escapeHtml)(x)}<br/>Y: ${(0, import_charts_core8.escapeHtml)(y)}`;
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
+            }
+          ),
+          legend: (0, import_charts_core8.buildLegend)(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: (0, import_charts_core8.buildAxis)(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: (0, import_charts_core8.buildAxis)(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            yAxisConfig
+          ),
+          series
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      showTrendLine,
+      symbolSize,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              seriesIndex: params.seriesIndex,
-              seriesName: params.seriesName || "",
-              dataIndex: params.dataIndex || 0,
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            seriesIndex: params.seriesIndex,
+            seriesName: params.seriesName || "",
+            dataIndex: params.dataIndex || 0,
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.generateScatterChartDescription)(title, data) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.generateScatterChartDescription)(title, data) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChartContainer,
       {
         ref,
@@ -1088,8 +1560,10 @@ var ScatterChart = React9.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1097,15 +1571,15 @@ var ScatterChart = React9.forwardRef(
 ScatterChart.displayName = "ScatterChart";
 
 // src/components/core/DonutChart.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var echarts8 = __toESM(require("echarts/core"), 1);
 var import_charts6 = require("echarts/charts");
 var import_components6 = require("echarts/components");
 var import_renderers6 = require("echarts/renderers");
-var import_charts_core6 = require("@classic-homes/charts-core");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_charts_core9 = require("@classic-homes/charts-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 echarts8.use([import_charts6.PieChart, import_components6.TooltipComponent, import_components6.LegendComponent, import_components6.TitleComponent, import_renderers6.CanvasRenderer]);
-var DonutChart = React10.forwardRef(
+var DonutChart = React11.forwardRef(
   ({
     title,
     description,
@@ -1123,93 +1597,134 @@ var DonutChart = React10.forwardRef(
     innerRadius = "50%",
     centerLabel,
     centerValue,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React10.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core9.getChartColors)(currentTheme);
+    const legend = useChartLegend({
+      names: data?.map((d) => d.name) ?? [],
+      colors: data?.map((d) => d.color) ?? [],
+      palette: chartColors.series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React11.useMemo(() => {
       if (isEmpty) return {};
+      const pieCenter = (0, import_charts_core9.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "45%"]);
       const graphicElements = [];
       if (centerLabel || centerValue) {
-        graphicElements.push({
-          type: "group",
-          left: "center",
-          top: "40%",
-          children: [
-            ...centerValue !== void 0 ? [
-              {
-                type: "text",
-                style: {
-                  text: String(centerValue),
-                  fontSize: 28,
-                  fontWeight: "bold",
-                  fill: "currentColor",
-                  textAlign: "center"
-                },
-                top: 0,
-                left: "center"
-              }
-            ] : [],
-            ...centerLabel ? [
-              {
-                type: "text",
-                style: {
-                  text: centerLabel,
-                  fontSize: 14,
-                  fill: "#888",
-                  textAlign: "center"
-                },
-                top: centerValue !== void 0 ? 35 : 0,
-                left: "center"
-              }
-            ] : []
-          ]
-        });
-      }
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c} ({d}%)"
-        } : void 0,
-        legend: showLegend ? {
-          orient: "horizontal",
-          bottom: 0,
-          data: data.map((d) => d.name)
-        } : void 0,
-        graphic: graphicElements.length > 0 ? graphicElements : void 0,
-        series: [
-          {
-            name: title,
-            type: "pie",
-            radius: [innerRadius, "70%"],
-            center: ["50%", "45%"],
-            avoidLabelOverlap: true,
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : void 0
-            })),
-            label: showLabels ? {
-              show: true,
-              position: labelPosition,
-              formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
-            } : {
-              show: false
-            },
-            labelLine: {
-              show: showLabels && labelPosition === "outside"
+        graphicElements.push(
+          (0, import_charts_core9.anchorCenterGraphic)(
+            {
+              type: "group",
+              left: "center",
+              top: "40%",
+              children: [
+                ...centerValue !== void 0 ? [
+                  {
+                    type: "text",
+                    style: {
+                      text: String(centerValue),
+                      fontSize: 28,
+                      fontWeight: "bold",
+                      fill: chartColors.foreground,
+                      textAlign: "center"
+                    },
+                    top: 0,
+                    left: "center"
+                  }
+                ] : [],
+                ...centerLabel ? [
+                  {
+                    type: "text",
+                    style: {
+                      text: centerLabel,
+                      fontSize: 14,
+                      fill: chartColors.mutedForeground,
+                      textAlign: "center"
+                    },
+                    top: centerValue !== void 0 ? 35 : 0,
+                    left: "center"
+                  }
+                ] : []
+              ]
             },
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+            pieCenter,
+            ["50%", "45%"]
+          )
+        );
+      }
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${(0, import_charts_core9.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core9.escapeHtml)(p.name)}: ${(0, import_charts_core9.escapeHtml)((0, import_charts_core9.formatTooltipValue)(p.value, valueFormatter))} (${p.percent}%)`;
+        } : "{a} <br/>{b}: {c} ({d}%)"
+      };
+      return (0, import_charts_core9.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core9.buildTooltip)(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel: (0, import_charts_core9.itemLabelLookup)(data)
+          }),
+          legend: (0, import_charts_core9.buildLegend)(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
+          ),
+          graphic: graphicElements.length > 0 ? graphicElements : void 0,
+          series: [
+            {
+              name: title,
+              type: "pie",
+              radius: [innerRadius, "70%"],
+              center: pieCenter,
+              avoidLabelOverlap: true,
+              data: data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : void 0,
+                label: (0, import_charts_core9.pointLabel)(item.label, labelFormatter, { position: labelPosition })
+              })),
+              label: (0, import_charts_core9.buildDataLabel)(
+                {
+                  show: true,
+                  position: labelPosition,
+                  formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel: (0, import_charts_core9.itemLabelLookup)(data) }
+              ),
+              labelLine: {
+                show: showLabels && labelPosition === "outside"
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
               }
             }
-          }
-        ]
-      };
+          ]
+        },
+        optionOverride
+      );
     }, [
       data,
       isEmpty,
@@ -1220,29 +1735,38 @@ var DonutChart = React10.forwardRef(
       innerRadius,
       centerLabel,
       centerValue,
-      title
+      title,
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core9.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              percent: params.percent,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            percent: params.percent,
+            color: params.color
           });
-        }
+        });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core6.generatePieChartDescription)(title, data, true) : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core9.generatePieChartDescription)(title, data, true) : void 0);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ChartContainer,
       {
         ref,
@@ -1254,8 +1778,10 @@ var DonutChart = React10.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1263,12 +1789,13 @@ var DonutChart = React10.forwardRef(
 DonutChart.displayName = "DonutChart";
 
 // src/components/extended/RadarChart.tsx
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var echarts9 = __toESM(require("echarts/core"), 1);
 var import_charts7 = require("echarts/charts");
 var import_components7 = require("echarts/components");
 var import_renderers7 = require("echarts/renderers");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_charts_core10 = require("@classic-homes/charts-core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 echarts9.use([
   import_charts7.RadarChart,
   import_components7.TooltipComponent,
@@ -1277,7 +1804,7 @@ echarts9.use([
   import_components7.RadarComponent,
   import_renderers7.CanvasRenderer
 ]);
-var RadarChart = React11.forwardRef(
+var RadarChart = React12.forwardRef(
   ({
     title,
     description,
@@ -1292,50 +1819,101 @@ var RadarChart = React11.forwardRef(
     showLegend = true,
     showTooltip = true,
     shape = "polygon",
+    showLabels = false,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.series?.length || !indicators?.length || data.series.every((s) => !s.data?.length);
-    const option = React11.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.series?.map((s) => s.name) ?? [],
+      colors: data?.series?.map((s) => s.color) ?? [],
+      palette: (0, import_charts_core10.getChartColors)(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React12.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item"
-        } : void 0,
-        legend: showLegend ? {
-          data: data.series.map((s) => s.name),
-          bottom: 0
-        } : void 0,
-        radar: {
-          indicator: indicators.map((ind) => ({
-            name: ind.name,
-            max: ind.max,
-            min: ind.min
-          })),
-          shape
+      return (0, import_charts_core10.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core10.buildTooltip)(
+            {
+              trigger: "item"
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          legend: (0, import_charts_core10.buildLegend)(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          radar: {
+            indicator: indicators.map((ind) => ({
+              name: ind.name,
+              max: ind.max,
+              min: ind.min
+            })),
+            shape,
+            center: (0, import_charts_core10.legendCenter)(legendConfig, showLegend && !customLegend, ["50%", "50%"])
+          },
+          series: [
+            {
+              type: "radar",
+              label: (0, import_charts_core10.buildDataLabel)({ show: true }, void 0, {
+                show: showLabels,
+                formatter: labelFormatter
+              }),
+              data: data.series.map((series) => ({
+                name: series.name,
+                value: series.data,
+                itemStyle: series.color ? { color: series.color } : void 0,
+                areaStyle: {
+                  opacity: 0.2
+                }
+              }))
+            }
+          ]
         },
-        series: [
-          {
-            type: "radar",
-            data: data.series.map((series) => ({
-              name: series.name,
-              value: series.data,
-              itemStyle: series.color ? { color: series.color } : void 0,
-              areaStyle: {
-                opacity: 0.2
-              }
-            }))
-          }
-        ]
-      };
-    }, [data, indicators, isEmpty, showTooltip, showLegend, shape]);
+        optionOverride
+      );
+    }, [
+      data,
+      indicators,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      shape,
+      showLabels,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
     const { containerRef } = useChart({
       option,
       theme,
-      animation
+      animation,
+      onReady: (chart) => {
+        legend.attach(chart);
+      }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ChartContainer,
       {
         ref,
@@ -1347,8 +1925,10 @@ var RadarChart = React11.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1356,12 +1936,13 @@ var RadarChart = React11.forwardRef(
 RadarChart.displayName = "RadarChart";
 
 // src/components/extended/FunnelChart.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var echarts10 = __toESM(require("echarts/core"), 1);
 var import_charts8 = require("echarts/charts");
 var import_components8 = require("echarts/components");
 var import_renderers8 = require("echarts/renderers");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_charts_core11 = require("@classic-homes/charts-core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 echarts10.use([
   import_charts8.FunnelChart,
   import_components8.TooltipComponent,
@@ -1369,7 +1950,7 @@ echarts10.use([
   import_components8.TitleComponent,
   import_renderers8.CanvasRenderer
 ]);
-var FunnelChart = React12.forwardRef(
+var FunnelChart = React13.forwardRef(
   ({
     title,
     description,
@@ -1385,81 +1966,134 @@ var FunnelChart = React12.forwardRef(
     sort = "descending",
     orientation = "vertical",
     showLabels = true,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    legend: legendConfig,
+    renderLegend,
+    onLegendChange,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React12.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const legend = useChartLegend({
+      names: data?.map((d) => d.name) ?? [],
+      colors: data?.map((d) => d.color) ?? [],
+      palette: (0, import_charts_core11.getChartColors)(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React13.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          formatter: "{a} <br/>{b}: {c}"
-        } : void 0,
-        legend: showLegend ? {
-          data: data.map((d) => d.name),
-          bottom: 0
-        } : void 0,
-        series: [
-          {
-            name: title,
-            type: "funnel",
-            left: "10%",
-            top: 60,
-            bottom: 60,
-            width: "80%",
-            min: 0,
-            max: Math.max(...data.map((d) => d.value)),
-            minSize: "0%",
-            maxSize: "100%",
-            sort,
-            orient: orientation,
-            gap: 2,
-            label: showLabels ? {
-              show: true,
-              position: "inside",
-              formatter: "{b}: {c}"
-            } : {
-              show: false
-            },
-            labelLine: {
-              show: false
-            },
-            emphasis: {
-              label: {
-                fontSize: 16
-              }
-            },
-            data: data.map((item) => ({
-              name: item.name,
-              value: item.value,
-              itemStyle: item.color ? { color: item.color } : void 0
-            }))
-          }
-        ]
+      const getLabel = (0, import_charts_core11.itemLabelLookup)(data);
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${(0, import_charts_core11.escapeHtml)(p.seriesName)} <br/>${(0, import_charts_core11.escapeHtml)(p.name)}: ${(0, import_charts_core11.escapeHtml)((0, import_charts_core11.formatTooltipValue)(p.value, valueFormatter))}`;
+        } : "{a} <br/>{b}: {c}"
       };
-    }, [data, isEmpty, showTooltip, showLegend, sort, orientation, showLabels, title]);
+      return (0, import_charts_core11.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core11.buildTooltip)(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel
+          }),
+          legend: (0, import_charts_core11.buildLegend)(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          series: [
+            {
+              name: title,
+              type: "funnel",
+              left: "10%",
+              top: 60,
+              bottom: 60,
+              width: "80%",
+              min: 0,
+              // reduce, not Math.max(...): spreading large arrays overflows the stack
+              max: data.reduce((m, d) => d.value > m ? d.value : m, -Infinity),
+              minSize: "0%",
+              maxSize: "100%",
+              sort,
+              orient: orientation,
+              gap: 2,
+              label: (0, import_charts_core11.buildDataLabel)(
+                {
+                  show: true,
+                  position: "inside",
+                  formatter: "{b}: {c}"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel }
+              ),
+              labelLine: {
+                show: false
+              },
+              emphasis: {
+                label: {
+                  fontSize: 16
+                }
+              },
+              data: data.map((item) => ({
+                name: item.name,
+                value: item.value,
+                itemStyle: item.color ? { color: item.color } : void 0,
+                label: (0, import_charts_core11.pointLabel)(item.label, labelFormatter, { position: "inside" })
+              }))
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      sort,
+      orientation,
+      showLabels,
+      title,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              color: params.color
-            });
+        legend.attach(chart);
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            color: params.color
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ChartContainer,
       {
         ref,
@@ -1471,8 +2105,10 @@ var FunnelChart = React12.forwardRef(
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
+        legendPosition: legendConfig?.position,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1480,14 +2116,15 @@ var FunnelChart = React12.forwardRef(
 FunnelChart.displayName = "FunnelChart";
 
 // src/components/extended/GaugeChart.tsx
-var React13 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var echarts11 = __toESM(require("echarts/core"), 1);
 var import_charts9 = require("echarts/charts");
 var import_components9 = require("echarts/components");
 var import_renderers9 = require("echarts/renderers");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-echarts11.use([import_charts9.GaugeChart, import_components9.TitleComponent, import_renderers9.CanvasRenderer]);
-var GaugeChart = React13.forwardRef(
+var import_charts_core12 = require("@classic-homes/charts-core");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+echarts11.use([import_charts9.GaugeChart, import_components9.TitleComponent, import_components9.TooltipComponent, import_renderers9.CanvasRenderer]);
+var GaugeChart = React14.forwardRef(
   ({
     title,
     description,
@@ -1503,89 +2140,123 @@ var GaugeChart = React13.forwardRef(
     splitNumber = 10,
     showProgress = true,
     formatValue,
+    showTooltip = true,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     class: className,
     ...props
   }, ref) => {
-    const option = React13.useMemo(() => {
-      return {
-        series: [
-          {
-            type: "gauge",
-            center: ["50%", "60%"],
-            radius: "80%",
-            min,
-            max,
-            splitNumber,
-            progress: showProgress ? {
-              show: true,
-              width: 18
-            } : void 0,
-            axisLine: {
-              lineStyle: {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core12.getChartColors)(currentTheme);
+    const reducedMotion = useReducedMotion();
+    const option = React14.useMemo(() => {
+      return (0, import_charts_core12.mergeChartOption)(
+        {
+          // No tooltip by default; one appears once its content is customised
+          tooltip: tooltipFormatter || tooltipValueFormatter ? (0, import_charts_core12.buildTooltip)(
+            { trigger: "item" },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ) : void 0,
+          series: [
+            {
+              type: "gauge",
+              center: ["50%", "60%"],
+              radius: "80%",
+              min,
+              max,
+              splitNumber,
+              progress: showProgress ? {
+                show: true,
                 width: 18
-              }
-            },
-            axisTick: {
-              distance: -30,
-              splitNumber: 5,
-              lineStyle: {
-                width: 2,
-                color: "#999"
-              }
-            },
-            splitLine: {
-              distance: -32,
-              length: 10,
-              lineStyle: {
-                width: 3,
-                color: "#999"
-              }
-            },
-            axisLabel: {
-              distance: -20,
-              color: "#999",
-              fontSize: 12
-            },
-            anchor: {
-              show: true,
-              size: 20,
-              itemStyle: {
-                borderWidth: 2
-              }
-            },
-            pointer: {
-              width: 6,
-              length: "60%"
-            },
-            title: {
-              show: true,
-              offsetCenter: [0, "70%"],
-              fontSize: 14
-            },
-            detail: {
-              valueAnimation: animation,
-              fontSize: 28,
-              fontWeight: "bold",
-              offsetCenter: [0, "40%"],
-              formatter: formatValue || "{value}"
-            },
-            data: [
-              {
-                value,
-                name: title
-              }
-            ]
-          }
-        ]
-      };
-    }, [value, min, max, splitNumber, showProgress, formatValue, title, animation]);
+              } : void 0,
+              axisLine: {
+                lineStyle: {
+                  width: 18
+                }
+              },
+              axisTick: {
+                distance: -30,
+                splitNumber: 5,
+                lineStyle: {
+                  width: 2,
+                  color: chartColors.mutedForeground
+                }
+              },
+              splitLine: {
+                distance: -32,
+                length: 10,
+                lineStyle: {
+                  width: 3,
+                  color: chartColors.mutedForeground
+                }
+              },
+              axisLabel: {
+                distance: -20,
+                color: chartColors.mutedForeground,
+                fontSize: 12
+              },
+              anchor: {
+                show: true,
+                size: 20,
+                itemStyle: {
+                  borderWidth: 2
+                }
+              },
+              pointer: {
+                width: 6,
+                length: "60%"
+              },
+              title: {
+                show: true,
+                offsetCenter: [0, "70%"],
+                fontSize: 14
+              },
+              detail: {
+                valueAnimation: animation && !reducedMotion,
+                fontSize: 28,
+                fontWeight: "bold",
+                offsetCenter: [0, "40%"],
+                formatter: formatValue || "{value}"
+              },
+              data: [
+                {
+                  value,
+                  name: title
+                }
+              ]
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      value,
+      min,
+      max,
+      splitNumber,
+      showProgress,
+      formatValue,
+      title,
+      animation,
+      reducedMotion,
+      chartColors,
+      showTooltip,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core12.THEME_DARK ? "dark" : "light",
       animation
     });
     const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ChartContainer,
       {
         ref,
@@ -1597,7 +2268,7 @@ var GaugeChart = React13.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1605,12 +2276,13 @@ var GaugeChart = React13.forwardRef(
 GaugeChart.displayName = "GaugeChart";
 
 // src/components/extended/HeatmapChart.tsx
-var React14 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var echarts12 = __toESM(require("echarts/core"), 1);
 var import_charts10 = require("echarts/charts");
 var import_components10 = require("echarts/components");
 var import_renderers10 = require("echarts/renderers");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_charts_core13 = require("@classic-homes/charts-core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 echarts12.use([
   import_charts10.HeatmapChart,
   import_components10.GridComponent,
@@ -1619,7 +2291,7 @@ echarts12.use([
   import_components10.VisualMapComponent,
   import_renderers10.CanvasRenderer
 ]);
-var HeatmapChart = React14.forwardRef(
+var HeatmapChart = React15.forwardRef(
   ({
     title,
     description,
@@ -1634,95 +2306,140 @@ var HeatmapChart = React14.forwardRef(
     animation = true,
     showTooltip = true,
     showValues = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.data?.length || !xAxis?.length || !yAxis?.length;
-    const values = data?.data?.map(([, , value]) => value) || [];
-    const minValue = data?.min ?? Math.min(...values);
-    const maxValue = data?.max ?? Math.max(...values);
-    const option = React14.useMemo(() => {
+    let dataMin = Infinity;
+    let dataMax = -Infinity;
+    for (const [, , value] of data?.data ?? []) {
+      if (value < dataMin) dataMin = value;
+      if (value > dataMax) dataMax = value;
+    }
+    const minValue = data?.min ?? dataMin;
+    const maxValue = data?.max ?? dataMax;
+    const option = React15.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          position: "top",
-          formatter: (params) => {
-            const p = params;
-            if (!p.value) return "";
-            const [xIdx, yIdx, value] = p.value;
-            return `${xAxis[xIdx]} / ${yAxis[yIdx]}: ${value}`;
-          }
-        } : void 0,
-        grid: {
-          left: "3%",
-          right: "10%",
-          bottom: "3%",
-          containLabel: true
-        },
-        xAxis: {
-          type: "category",
-          data: xAxis,
-          splitArea: {
-            show: true
-          }
-        },
-        yAxis: {
-          type: "category",
-          data: yAxis,
-          splitArea: {
-            show: true
-          }
-        },
-        visualMap: {
-          min: minValue,
-          max: maxValue,
-          calculable: true,
-          orient: "vertical",
-          right: "0%",
-          top: "center"
-        },
-        series: [
-          {
-            name: title,
-            type: "heatmap",
-            data: data.data,
-            label: showValues ? {
-              show: true
-            } : void 0,
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowColor: "rgba(0, 0, 0, 0.5)"
+      return (0, import_charts_core13.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core13.buildTooltip)(
+            {
+              position: "top",
+              formatter: (params) => {
+                const p = params;
+                if (!p.value) return "";
+                const [xIdx, yIdx, value] = p.value;
+                return `${(0, import_charts_core13.escapeHtml)(xAxis[xIdx])} / ${(0, import_charts_core13.escapeHtml)(yAxis[yIdx])}: ${(0, import_charts_core13.escapeHtml)((0, import_charts_core13.formatTooltipValue)(value, tooltipValueFormatter))}`;
               }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
             }
-          }
-        ]
-      };
-    }, [data, xAxis, yAxis, isEmpty, showTooltip, showValues, minValue, maxValue, title]);
+          ),
+          grid: {
+            left: "3%",
+            right: "10%",
+            bottom: "3%",
+            containLabel: true
+          },
+          xAxis: (0, import_charts_core13.buildAxis)(
+            {
+              type: "category",
+              data: xAxis,
+              splitArea: {
+                show: true
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: (0, import_charts_core13.buildAxis)(
+            {
+              type: "category",
+              data: yAxis,
+              splitArea: {
+                show: true
+              }
+            },
+            yAxisConfig
+          ),
+          visualMap: {
+            min: minValue,
+            max: maxValue,
+            calculable: true,
+            orient: "vertical",
+            right: "0%",
+            top: "center"
+          },
+          series: [
+            {
+              name: title,
+              type: "heatmap",
+              data: data.data,
+              label: (0, import_charts_core13.buildDataLabel)({ show: true }, void 0, {
+                show: showValues,
+                formatter: labelFormatter
+              }),
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
+              }
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      xAxis,
+      yAxis,
+      isEmpty,
+      showTooltip,
+      showValues,
+      minValue,
+      maxValue,
+      title,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick, xAxis, yAxis });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const [xIdx, yIdx, value] = params.value || [0, 0, 0];
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              xIndex: xIdx,
-              yIndex: yIdx,
-              xLabel: xAxis[xIdx],
-              yLabel: yAxis[yIdx],
-              value
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2, xAxis: xAxis2, yAxis: yAxis2 } = latest.current;
+          if (!onClick2) return;
+          const [xIdx, yIdx, value] = params.value || [0, 0, 0];
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            xIndex: xIdx,
+            yIndex: yIdx,
+            xLabel: xAxis2[xIdx],
+            yLabel: yAxis2[yIdx],
+            value
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       ChartContainer,
       {
         ref,
@@ -1735,7 +2452,7 @@ var HeatmapChart = React14.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1743,14 +2460,15 @@ var HeatmapChart = React14.forwardRef(
 HeatmapChart.displayName = "HeatmapChart";
 
 // src/components/extended/TreemapChart.tsx
-var React15 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var echarts13 = __toESM(require("echarts/core"), 1);
 var import_charts11 = require("echarts/charts");
 var import_components11 = require("echarts/components");
 var import_renderers11 = require("echarts/renderers");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_charts_core14 = require("@classic-homes/charts-core");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 echarts13.use([import_charts11.TreemapChart, import_components11.TooltipComponent, import_components11.TitleComponent, import_renderers11.CanvasRenderer]);
-var TreemapChart = React15.forwardRef(
+var TreemapChart = React16.forwardRef(
   ({
     title,
     description,
@@ -1763,89 +2481,122 @@ var TreemapChart = React15.forwardRef(
     theme = "auto",
     animation = true,
     showTooltip = true,
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.length;
-    const option = React15.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core14.getChartColors)(currentTheme);
+    const option = React16.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          formatter: (params) => {
-            const p = params;
-            return `${p.name}: ${p.value}`;
-          }
-        } : void 0,
-        series: [
-          {
-            type: "treemap",
-            data,
-            roam: false,
-            levels: levels || [
-              {
-                itemStyle: {
-                  borderColor: "#555",
-                  borderWidth: 4,
-                  gapWidth: 4
-                }
-              },
-              {
-                colorSaturation: [0.3, 0.6],
-                itemStyle: {
-                  borderColorSaturation: 0.7,
-                  gapWidth: 2,
-                  borderWidth: 2
-                }
-              },
-              {
-                colorSaturation: [0.3, 0.5],
-                itemStyle: {
-                  borderColorSaturation: 0.6,
-                  gapWidth: 1
+      const toNode = (node) => ({
+        ...node,
+        children: node.children?.map(toNode),
+        label: (0, import_charts_core14.pointLabel)(node.label, labelFormatter)
+      });
+      return (0, import_charts_core14.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core14.buildTooltip)(
+            {
+              formatter: (params) => {
+                const p = params;
+                return `${(0, import_charts_core14.escapeHtml)(p.name)}: ${(0, import_charts_core14.escapeHtml)((0, import_charts_core14.formatTooltipValue)(p.value, tooltipValueFormatter))}`;
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          series: [
+            {
+              type: "treemap",
+              data: data.map(toNode),
+              roam: false,
+              levels: levels || [
+                {
+                  itemStyle: {
+                    borderColor: chartColors.divider,
+                    borderWidth: 4,
+                    gapWidth: 4
+                  }
+                },
+                {
+                  colorSaturation: [0.3, 0.6],
+                  itemStyle: {
+                    borderColorSaturation: 0.7,
+                    gapWidth: 2,
+                    borderWidth: 2
+                  }
+                },
+                {
+                  colorSaturation: [0.3, 0.5],
+                  itemStyle: {
+                    borderColorSaturation: 0.6,
+                    gapWidth: 1
+                  }
+                },
+                {
+                  colorSaturation: [0.3, 0.5]
                 }
+              ],
+              label: (0, import_charts_core14.buildDataLabel)({ show: true, formatter: "{b}" }, void 0, {
+                show: true,
+                formatter: labelFormatter,
+                getLabel: (0, import_charts_core14.nameLabelLookup)(data)
+              }),
+              upperLabel: {
+                show: true,
+                height: 30
               },
-              {
-                colorSaturation: [0.3, 0.5]
+              breadcrumb: {
+                show: true
               }
-            ],
-            label: {
-              show: true,
-              formatter: "{b}"
-            },
-            upperLabel: {
-              show: true,
-              height: 30
-            },
-            breadcrumb: {
-              show: true
             }
-          }
-        ]
-      };
-    }, [data, levels, isEmpty, showTooltip]);
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      levels,
+      isEmpty,
+      showTooltip,
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core14.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const treePathInfo = params.treePathInfo || [];
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              name: params.name || "",
-              value: params.value,
-              path: treePathInfo.map((item) => item.name || ""),
-              depth: treePathInfo.length - 1
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          const treePathInfo = params.treePathInfo || [];
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            name: params.name || "",
+            value: params.value,
+            path: treePathInfo.map((item) => item.name || ""),
+            depth: treePathInfo.length - 1
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Treemap chart showing hierarchical data.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       ChartContainer,
       {
         ref,
@@ -1858,7 +2609,7 @@ var TreemapChart = React15.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1866,12 +2617,13 @@ var TreemapChart = React15.forwardRef(
 TreemapChart.displayName = "TreemapChart";
 
 // src/components/extended/CandlestickChart.tsx
-var React16 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var echarts14 = __toESM(require("echarts/core"), 1);
 var import_charts12 = require("echarts/charts");
 var import_components12 = require("echarts/components");
 var import_renderers12 = require("echarts/renderers");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_charts_core15 = require("@classic-homes/charts-core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 echarts14.use([
   import_charts12.CandlestickChart,
   import_charts12.BarChart,
@@ -1881,7 +2633,7 @@ echarts14.use([
   import_components12.DataZoomComponent,
   import_renderers12.CanvasRenderer
 ]);
-var CandlestickChart = React16.forwardRef(
+var CandlestickChart = React17.forwardRef(
   ({
     title,
     description,
@@ -1894,12 +2646,19 @@ var CandlestickChart = React16.forwardRef(
     animation = true,
     showTooltip = true,
     showVolume = false,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.dates?.length || !data?.data?.length;
-    const option = React16.useMemo(() => {
+    const currentTheme = useChartTheme(theme);
+    const chartColors = (0, import_charts_core15.getChartColors)(currentTheme);
+    const option = React17.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
       const seriesArr = [
@@ -1908,12 +2667,12 @@ var CandlestickChart = React16.forwardRef(
           type: "candlestick",
           data: candlestickData,
           itemStyle: {
-            color: "#ef4444",
+            color: chartColors.destructive,
             // Up color (red for bearish in some markets)
-            color0: "#22c55e",
+            color0: chartColors.success,
             // Down color (green for bullish)
-            borderColor: "#ef4444",
-            borderColor0: "#22c55e"
+            borderColor: chartColors.destructive,
+            borderColor0: chartColors.success
           }
         }
       ];
@@ -1926,23 +2685,29 @@ var CandlestickChart = React16.forwardRef(
         }
       ];
       const xAxisArr = [
-        {
-          type: "category",
-          data: data.dates,
-          boundaryGap: false,
-          axisLine: { onZero: false },
-          splitLine: { show: false },
-          min: "dataMin",
-          max: "dataMax"
-        }
+        (0, import_charts_core15.buildAxis)(
+          {
+            type: "category",
+            data: data.dates,
+            boundaryGap: false,
+            axisLine: { onZero: false },
+            splitLine: { show: false },
+            min: "dataMin",
+            max: "dataMax"
+          },
+          xAxisConfig
+        )
       ];
       const yAxisArr = [
-        {
-          scale: true,
-          splitArea: {
-            show: true
-          }
-        }
+        (0, import_charts_core15.buildAxis)(
+          {
+            scale: true,
+            splitArea: {
+              show: true
+            }
+          },
+          yAxisConfig
+        )
       ];
       if (showVolume && data.volume) {
         gridArr.push({
@@ -1979,62 +2744,86 @@ var CandlestickChart = React16.forwardRef(
           yAxisIndex: 1,
           data: data.volume,
           itemStyle: {
-            color: "#6b7280"
+            color: chartColors.mutedForeground
           }
         });
       }
-      return {
-        tooltip: showTooltip ? {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross"
-          }
-        } : void 0,
-        grid: gridArr,
-        xAxis: xAxisArr,
-        yAxis: yAxisArr,
-        dataZoom: [
-          {
-            type: "inside",
-            start: 80,
-            end: 100
-          },
-          {
-            show: true,
-            type: "slider",
-            top: "90%",
-            start: 80,
-            end: 100
-          }
-        ],
-        series: seriesArr
-      };
-    }, [data, isEmpty, showTooltip, showVolume, title]);
+      return (0, import_charts_core15.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core15.buildTooltip)(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "cross"
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          grid: gridArr,
+          xAxis: xAxisArr,
+          yAxis: yAxisArr,
+          dataZoom: [
+            {
+              type: "inside",
+              start: 80,
+              end: 100
+            },
+            {
+              show: true,
+              type: "slider",
+              top: "90%",
+              start: 80,
+              end: 100
+            }
+          ],
+          series: seriesArr
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showVolume,
+      title,
+      chartColors,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick, data });
     const { containerRef } = useChart({
       option,
-      theme,
+      theme: currentTheme === import_charts_core15.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const dataIndex = params.dataIndex || 0;
-            const item = data.data[dataIndex];
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              date: data.dates[dataIndex],
-              open: item.open,
-              close: item.close,
-              high: item.high,
-              low: item.low,
-              volume: data.volume?.[dataIndex]
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2, data: data2 } = latest.current;
+          if (!onClick2) return;
+          const dataIndex = params.dataIndex || 0;
+          const item = data2.data[dataIndex];
+          if (!item) return;
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            date: data2.dates[dataIndex],
+            open: item.open,
+            close: item.close,
+            high: item.high,
+            low: item.low,
+            volume: data2.volume?.[dataIndex]
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ChartContainer,
       {
         ref,
@@ -2047,7 +2836,7 @@ var CandlestickChart = React16.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2055,14 +2844,15 @@ var CandlestickChart = React16.forwardRef(
 CandlestickChart.displayName = "CandlestickChart";
 
 // src/components/extended/SankeyChart.tsx
-var React17 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var echarts15 = __toESM(require("echarts/core"), 1);
 var import_charts13 = require("echarts/charts");
 var import_components13 = require("echarts/components");
 var import_renderers13 = require("echarts/renderers");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_charts_core16 = require("@classic-homes/charts-core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 echarts15.use([import_charts13.SankeyChart, import_components13.TooltipComponent, import_components13.TitleComponent, import_renderers13.CanvasRenderer]);
-var SankeyChart = React17.forwardRef(
+var SankeyChart = React18.forwardRef(
   ({
     title,
     description,
@@ -2075,68 +2865,97 @@ var SankeyChart = React17.forwardRef(
     animation = true,
     showTooltip = true,
     orient = "horizontal",
+    labelFormatter,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.nodes?.length || !data?.links?.length;
-    const option = React17.useMemo(() => {
+    const option = React18.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          trigger: "item",
-          triggerOn: "mousemove"
-        } : void 0,
-        series: [
-          {
-            type: "sankey",
-            orient,
-            emphasis: {
-              focus: "adjacency"
-            },
-            data: data.nodes.map((node) => ({
-              name: node.name,
-              itemStyle: node.color ? { color: node.color } : void 0
-            })),
-            links: data.links.map((link) => ({
-              source: link.source,
-              target: link.target,
-              value: link.value
-            })),
-            lineStyle: {
-              color: "gradient",
-              curveness: 0.5
+      return (0, import_charts_core16.mergeChartOption)(
+        {
+          tooltip: (0, import_charts_core16.buildTooltip)(
+            {
+              trigger: "item",
+              triggerOn: "mousemove"
             },
-            label: {
-              position: orient === "horizontal" ? "right" : "bottom"
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
             }
-          }
-        ]
-      };
-    }, [data, isEmpty, showTooltip, orient]);
+          ),
+          series: [
+            {
+              type: "sankey",
+              orient,
+              emphasis: {
+                focus: "adjacency"
+              },
+              data: data.nodes.map((node) => ({
+                name: node.name,
+                itemStyle: node.color ? { color: node.color } : void 0,
+                label: (0, import_charts_core16.pointLabel)(node.label, labelFormatter)
+              })),
+              links: data.links.map((link) => ({
+                source: link.source,
+                target: link.target,
+                value: link.value
+              })),
+              lineStyle: {
+                color: "gradient",
+                curveness: 0.5
+              },
+              label: (0, import_charts_core16.buildDataLabel)(
+                {
+                  position: orient === "horizontal" ? "right" : "bottom"
+                },
+                void 0,
+                { show: true, formatter: labelFormatter, getLabel: (0, import_charts_core16.nameLabelLookup)(data.nodes) }
+              )
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      orient,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
+    const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
-        if (onClick) {
-          chart.on("click", (params) => {
-            const isEdge = params.dataType === "edge";
-            onClick({
-              type: params.type || "click",
-              componentType: params.componentType || "series",
-              dataType: isEdge ? "edge" : "node",
-              name: params.name || "",
-              value: isEdge ? params.value : void 0,
-              source: isEdge ? params.data?.source : void 0,
-              target: isEdge ? params.data?.target : void 0
-            });
+        chart.on("click", (params) => {
+          const { onClick: onClick2 } = latest.current;
+          if (!onClick2) return;
+          const isEdge = params.dataType === "edge";
+          onClick2({
+            type: params.type || "click",
+            componentType: params.componentType || "series",
+            dataType: isEdge ? "edge" : "node",
+            name: params.name || "",
+            value: isEdge ? params.value : void 0,
+            source: isEdge ? params.data?.source : void 0,
+            target: isEdge ? params.data?.target : void 0
           });
-        }
+        });
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Sankey diagram with ${data.nodes.length} nodes and ${data.links.length} links.` : void 0);
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       ChartContainer,
       {
         ref,
@@ -2149,7 +2968,7 @@ var SankeyChart = React17.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2163,6 +2982,7 @@ SankeyChart.displayName = "SankeyChart";
   ChartContainer,
   ChartEmpty,
   ChartError,
+  ChartLegend,
   ChartSkeleton,
   DonutChart,
   FunnelChart,
@@ -2177,6 +2997,7 @@ SankeyChart.displayName = "SankeyChart";
   cn,
   registerClassicThemes,
   useChart,
+  useChartLegend,
   useChartResize,
   useChartTheme,
   useReducedMotion