@classic-homes/charts-react 0.1.38 → 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
@@ -211,6 +213,8 @@ var ChartContainer = React4.forwardRef(
     onRetry,
     className,
     wrapperClassName,
+    legend,
+    legendPosition = "bottom",
     children,
     ...props
   }, ref) => {
@@ -233,7 +237,7 @@ 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,
@@ -241,7 +245,7 @@ var ChartContainer = React4.forwardRef(
         "aria-label": title,
         "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: descriptionId, className: "sr-only", children: description }),
@@ -249,17 +253,88 @@ var ChartContainer = React4.forwardRef(
         ]
       }
     );
+    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_core3 = require("@classic-homes/charts-core");
+var import_charts_core4 = require("@classic-homes/charts-core");
 
 // src/hooks/useChart.ts
 var import_react4 = require("react");
@@ -415,6 +490,10 @@ 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) {
@@ -423,8 +502,62 @@ function useLatestRef(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,
@@ -433,7 +566,7 @@ echarts3.use([
   import_components.TitleComponent,
   import_renderers.CanvasRenderer
 ]);
-var LineChart = React5.forwardRef(
+var LineChart = React6.forwardRef(
   ({
     title,
     description,
@@ -451,6 +584,16 @@ 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,
@@ -458,58 +601,93 @@ var LineChart = React5.forwardRef(
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core3.getChartColors)(currentTheme);
-    const option = React5.useMemo(() => {
+    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: chartColors.axisPointerLabel
+      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,
@@ -520,14 +698,24 @@ var LineChart = React5.forwardRef(
       areaFilled,
       showDataPoints,
       stacked,
-      chartColors
+      chartColors,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
     const latest = useLatestRef({ onClick, onHover });
     const { containerRef } = useChart({
       option,
-      theme: currentTheme === import_charts_core3.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core4.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -558,8 +746,8 @@ var LineChart = React5.forwardRef(
         });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core3.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,
@@ -571,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" })
       }
     );
   }
@@ -580,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_core4 = 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,
@@ -595,7 +785,7 @@ echarts4.use([
   import_components2.TitleComponent,
   import_renderers2.CanvasRenderer
 ]);
-var BarChart = React6.forwardRef(
+var BarChart = React7.forwardRef(
   ({
     title,
     description,
@@ -612,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",
@@ -633,47 +842,85 @@ 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) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -690,8 +937,8 @@ var BarChart = React6.forwardRef(
         });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core4.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,
@@ -703,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" })
       }
     );
   }
@@ -712,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_core5 = 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,
@@ -736,58 +985,107 @@ 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 ? [innerRadius, "70%"] : "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) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -802,8 +1100,8 @@ var PieChart = React7.forwardRef(
         });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core5.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,
@@ -815,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" })
       }
     );
   }
@@ -824,13 +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_charts_core6 = require("@classic-homes/charts-core");
-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,
@@ -839,7 +1139,7 @@ echarts6.use([
   import_components4.TitleComponent,
   import_renderers4.CanvasRenderer
 ]);
-var AreaChart = React8.forwardRef(
+var AreaChart = React9.forwardRef(
   ({
     title,
     description,
@@ -856,76 +1156,143 @@ 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 currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core6.getChartColors)(currentTheme);
-    const option = React8.useMemo(() => {
+    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: chartColors.axisPointerLabel
+      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) => {
-          const base = series.color || chartColors.series[index % chartColors.series.length];
-          return {
-            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: (0, import_charts_core6.colorWithAlpha)(base, 0.8) },
-                { offset: 1, color: (0, import_charts_core6.colorWithAlpha)(base, 0.1) }
-              ])
-            } : { opacity: 0.5 },
-            itemStyle: series.color ? { color: series.color } : void 0,
-            emphasis: {
-              focus: "series"
+          ),
+          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
             },
-            showSymbol: false
-          };
-        })
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient, chartColors]);
+            xAxisConfig
+          ),
+          yAxis: (0, import_charts_core7.buildAxis)(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            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: currentTheme === import_charts_core6.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core7.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -943,7 +1310,7 @@ var AreaChart = React8.forwardRef(
       }
     });
     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,
@@ -955,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" })
       }
     );
   }
@@ -964,13 +1333,13 @@ 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_core7 = 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
@@ -981,7 +1350,7 @@ echarts7.use([
   import_components5.TitleComponent,
   import_renderers5.CanvasRenderer
 ]);
-var ScatterChart = React9.forwardRef(
+var ScatterChart = React10.forwardRef(
   ({
     title,
     description,
@@ -997,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: {
@@ -1057,46 +1452,85 @@ 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 `${(0, import_charts_core7.escapeHtml)(p.seriesName)}<br/>X: ${(0, import_charts_core7.escapeHtml)(p.value[0])}<br/>Y: ${(0, import_charts_core7.escapeHtml)(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
-          }
+      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
         },
-        series
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, showTrendLine, symbolSize]);
+        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) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -1113,8 +1547,8 @@ var ScatterChart = React9.forwardRef(
         });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core7.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,
@@ -1126,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" })
       }
     );
   }
@@ -1135,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_core8 = 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,
@@ -1161,95 +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 currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core8.getChartColors)(currentTheme);
-    const option = React10.useMemo(() => {
+    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: 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"
-              }
-            ] : []
-          ]
-        });
-      }
-      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,
@@ -1261,14 +1736,21 @@ var DonutChart = React10.forwardRef(
       centerLabel,
       centerValue,
       title,
-      chartColors
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
     const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme: currentTheme === import_charts_core8.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core9.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -1283,8 +1765,8 @@ var DonutChart = React10.forwardRef(
         });
       }
     });
-    const accessibilityDescription = description || (!isEmpty ? (0, import_charts_core8.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,
@@ -1296,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" })
       }
     );
   }
@@ -1305,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,
@@ -1319,7 +1804,7 @@ echarts9.use([
   import_components7.RadarComponent,
   import_renderers7.CanvasRenderer
 ]);
-var RadarChart = React11.forwardRef(
+var RadarChart = React12.forwardRef(
   ({
     title,
     description,
@@ -1334,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,
@@ -1389,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" })
       }
     );
   }
@@ -1398,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,
@@ -1411,7 +1950,7 @@ echarts10.use([
   import_components8.TitleComponent,
   import_renderers8.CanvasRenderer
 ]);
-var FunnelChart = React12.forwardRef(
+var FunnelChart = React13.forwardRef(
   ({
     title,
     description,
@@ -1427,68 +1966,119 @@ 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,
-            // 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: 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) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -1503,7 +2093,7 @@ var FunnelChart = React12.forwardRef(
       }
     });
     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,
@@ -1515,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" })
       }
     );
   }
@@ -1524,15 +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_charts_core9 = require("@classic-homes/charts-core");
-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,
@@ -1548,84 +2140,100 @@ var GaugeChart = React13.forwardRef(
     splitNumber = 10,
     showProgress = true,
     formatValue,
+    showTooltip = true,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     class: className,
     ...props
   }, ref) => {
     const currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core9.getChartColors)(currentTheme);
+    const chartColors = (0, import_charts_core12.getChartColors)(currentTheme);
     const reducedMotion = useReducedMotion();
-    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 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: 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
-              }
-            ]
-          }
-        ]
-      };
+              } : 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,
@@ -1636,15 +2244,19 @@ var GaugeChart = React13.forwardRef(
       title,
       animation,
       reducedMotion,
-      chartColors
+      chartColors,
+      showTooltip,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
     ]);
     const { containerRef } = useChart({
       option,
-      theme: currentTheme === import_charts_core9.THEME_DARK ? "dark" : "light",
+      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,
@@ -1656,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" })
       }
     );
   }
@@ -1664,13 +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_charts_core10 = require("@classic-homes/charts-core");
-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,
@@ -1679,7 +2291,7 @@ echarts12.use([
   import_components10.VisualMapComponent,
   import_renderers10.CanvasRenderer
 ]);
-var HeatmapChart = React14.forwardRef(
+var HeatmapChart = React15.forwardRef(
   ({
     title,
     description,
@@ -1694,6 +2306,12 @@ var HeatmapChart = React14.forwardRef(
     animation = true,
     showTooltip = true,
     showValues = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
@@ -1707,64 +2325,97 @@ var HeatmapChart = React14.forwardRef(
     }
     const minValue = data?.min ?? dataMin;
     const maxValue = data?.max ?? dataMax;
-    const option = React14.useMemo(() => {
+    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 `${(0, import_charts_core10.escapeHtml)(xAxis[xIdx])} / ${(0, import_charts_core10.escapeHtml)(yAxis[yIdx])}: ${(0, import_charts_core10.escapeHtml)(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,
@@ -1788,7 +2439,7 @@ var HeatmapChart = React14.forwardRef(
       }
     });
     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,
@@ -1801,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" })
       }
     );
   }
@@ -1809,15 +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_charts_core11 = require("@classic-homes/charts-core");
-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,
@@ -1830,73 +2481,103 @@ 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 currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core11.getChartColors)(currentTheme);
-    const option = React15.useMemo(() => {
+    const chartColors = (0, import_charts_core14.getChartColors)(currentTheme);
+    const option = React16.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          formatter: (params) => {
-            const p = params;
-            return `${(0, import_charts_core11.escapeHtml)(p.name)}: ${(0, import_charts_core11.escapeHtml)(p.value)}`;
-          }
-        } : void 0,
-        series: [
-          {
-            type: "treemap",
-            data,
-            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
+      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, chartColors]);
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      levels,
+      isEmpty,
+      showTooltip,
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
     const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
-      theme: currentTheme === import_charts_core11.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core14.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
         chart.on("click", (params) => {
@@ -1915,7 +2596,7 @@ var TreemapChart = React15.forwardRef(
       }
     });
     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,
@@ -1928,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" })
       }
     );
   }
@@ -1936,13 +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_charts_core12 = require("@classic-homes/charts-core");
-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,
@@ -1952,7 +2633,7 @@ echarts14.use([
   import_components12.DataZoomComponent,
   import_renderers12.CanvasRenderer
 ]);
-var CandlestickChart = React16.forwardRef(
+var CandlestickChart = React17.forwardRef(
   ({
     title,
     description,
@@ -1965,14 +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 currentTheme = useChartTheme(theme);
-    const chartColors = (0, import_charts_core12.getChartColors)(currentTheme);
-    const option = React16.useMemo(() => {
+    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 = [
@@ -1999,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({
@@ -2056,37 +2748,59 @@ var CandlestickChart = React16.forwardRef(
           }
         });
       }
-      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, chartColors]);
+      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: currentTheme === import_charts_core12.THEME_DARK ? "dark" : "light",
+      theme: currentTheme === import_charts_core15.THEME_DARK ? "dark" : "light",
       animation,
       onReady: (chart) => {
         chart.on("click", (params) => {
@@ -2109,7 +2823,7 @@ var CandlestickChart = React16.forwardRef(
       }
     });
     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,
@@ -2122,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" })
       }
     );
   }
@@ -2130,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,
@@ -2150,45 +2865,73 @@ 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,
@@ -2212,7 +2955,7 @@ var SankeyChart = React17.forwardRef(
       }
     });
     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,
@@ -2225,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" })
       }
     );
   }
@@ -2239,6 +2982,7 @@ SankeyChart.displayName = "SankeyChart";
   ChartContainer,
   ChartEmpty,
   ChartError,
+  ChartLegend,
   ChartSkeleton,
   DonutChart,
   FunnelChart,
@@ -2253,6 +2997,7 @@ SankeyChart.displayName = "SankeyChart";
   cn,
   registerClassicThemes,
   useChart,
+  useChartLegend,
   useChartResize,
   useChartTheme,
   useReducedMotion