@classic-homes/charts-react 0.1.38 → 0.2.0

package/dist/index.js

@@ -153,6 +153,8 @@ var ChartContainer = React4.forwardRef(
     onRetry,
     className,
     wrapperClassName,
+    legend,
+    legendPosition = "bottom",
     children,
     ...props
   }, ref) => {
@@ -175,7 +177,7 @@ var ChartContainer = React4.forwardRef(
     if (empty) {
       return /* @__PURE__ */ jsx4(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
     }
-    return /* @__PURE__ */ jsxs4(
+    const chart = /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
@@ -183,7 +185,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__ */ jsx4("span", { id: descriptionId, className: "sr-only", children: description }),
@@ -191,12 +193,83 @@ var ChartContainer = React4.forwardRef(
         ]
       }
     );
+    if (!legend) return chart;
+    const side = legendPosition === "left" || legendPosition === "right";
+    const leading = legendPosition === "top" || legendPosition === "left";
+    const legendNode = /* @__PURE__ */ jsx4(
+      "div",
+      {
+        "data-testid": "chart-legend",
+        className: cn("flex shrink-0 p-2", side ? "items-center" : "justify-center"),
+        children: legend
+      }
+    );
+    return /* @__PURE__ */ jsxs4(
+      "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
 import * as React5 from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "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__ */ jsx5(
+      "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__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+          "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__ */ jsx5(
+                "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
+import * as React6 from "react";
 import * as echarts3 from "echarts/core";
 import { LineChart as EChartsLineChart } from "echarts/charts";
 import {
@@ -207,9 +280,18 @@ import {
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import {
+  buildAxis,
+  buildDataLabel,
+  buildLegend,
+  buildTooltip,
   generateLineChartDescription,
   getChartColors,
-  THEME_DARK as THEME_DARK2
+  hasPointLabels,
+  gridInset,
+  mergeChartOption,
+  seriesLabelLookup,
+  THEME_DARK as THEME_DARK2,
+  withPointLabels
 } from "@classic-homes/charts-core";
 
 // src/hooks/useChart.ts
@@ -366,6 +448,12 @@ function useChart({
   };
 }
 
+// src/hooks/useChartLegend.ts
+import { useCallback, useRef as useRef3, useState as useState4 } from "react";
+import {
+  getLegendItems
+} from "@classic-homes/charts-core";
+
 // src/hooks/useLatestRef.ts
 import { useRef as useRef2 } from "react";
 function useLatestRef(value) {
@@ -374,8 +462,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 = useRef3(null);
+  const [visible, setVisible] = useState4({});
+  const latest = useLatestRef({ onLegendChange });
+  const attach = 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: 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
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 echarts3.use([
   EChartsLineChart,
   GridComponent,
@@ -384,7 +526,7 @@ echarts3.use([
   TitleComponent,
   CanvasRenderer
 ]);
-var LineChart = React5.forwardRef(
+var LineChart = React6.forwardRef(
   ({
     title,
     description,
@@ -402,6 +544,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,
@@ -410,57 +562,92 @@ var LineChart = React5.forwardRef(
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
     const currentTheme = useChartTheme(theme);
     const chartColors = getChartColors(currentTheme);
-    const option = React5.useMemo(() => {
+    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 = seriesLabelLookup(data.series);
+      const showSymbol = showDataPoints || showLabels || hasPointLabels(data.series);
+      return mergeChartOption(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: 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: buildLegend(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis(
+            {
+              type: "category",
+              boundaryGap: false,
+              data: data.categories,
+              splitLine: {
+                show: showGrid
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            yAxisConfig
+          ),
+          series: data.series.map((series) => ({
+            name: series.name,
+            type: "line",
+            data: 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: 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,
@@ -471,7 +658,16 @@ 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({
@@ -479,6 +675,7 @@ var LineChart = React5.forwardRef(
       theme: currentTheme === THEME_DARK2 ? "dark" : "light",
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -510,7 +707,7 @@ var LineChart = React5.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? generateLineChartDescription(title, data) : void 0);
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       ChartContainer,
       {
         ref,
@@ -522,8 +719,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__ */ jsx5("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -531,7 +730,7 @@ var LineChart = React5.forwardRef(
 LineChart.displayName = "LineChart";
 
 // src/components/core/BarChart.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import * as echarts4 from "echarts/core";
 import { BarChart as EChartsBarChart } from "echarts/charts";
 import {
@@ -541,8 +740,19 @@ import {
   TitleComponent as TitleComponent2
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer2 } from "echarts/renderers";
-import { generateBarChartDescription } from "@classic-homes/charts-core";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis2,
+  buildDataLabel as buildDataLabel2,
+  buildLegend as buildLegend2,
+  buildTooltip as buildTooltip2,
+  generateBarChartDescription,
+  getChartColors as getChartColors2,
+  gridInset as gridInset2,
+  mergeChartOption as mergeChartOption2,
+  seriesLabelLookup as seriesLabelLookup2,
+  withPointLabels as withPointLabels2
+} from "@classic-homes/charts-core";
+import { jsx as jsx7 } from "react/jsx-runtime";
 echarts4.use([
   EChartsBarChart,
   GridComponent2,
@@ -551,7 +761,7 @@ echarts4.use([
   TitleComponent2,
   CanvasRenderer2
 ]);
-var BarChart = React6.forwardRef(
+var BarChart = React7.forwardRef(
   ({
     title,
     description,
@@ -568,13 +778,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: getChartColors2(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React7.useMemo(() => {
       if (isEmpty) return {};
       const categoryAxis = {
         type: "category",
@@ -589,47 +818,85 @@ var BarChart = React6.forwardRef(
           show: showGrid
         }
       };
-      return {
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true
+      const getLabel = seriesLabelLookup2(data.series);
+      return mergeChartOption2(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset2(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip2(
+            {
+              trigger: "axis",
+              axisPointer: {
+                type: "shadow"
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
+            }
+          ),
+          legend: buildLegend2(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis2(isHorizontal ? valueAxis : categoryAxis, xAxisConfig),
+          yAxis: buildAxis2(isHorizontal ? categoryAxis : valueAxis, yAxisConfig),
+          series: data.series.map((series) => ({
+            name: series.name,
+            type: "bar",
+            data: withPointLabels2(series.data, series.labels, labelFormatter, {
+              position: isHorizontal ? "right" : "top"
+            }),
+            stack: stacked ? "Total" : void 0,
+            itemStyle: series.color ? { color: series.color } : void 0,
+            label: buildDataLabel2(
+              {
+                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;
@@ -647,7 +914,7 @@ var BarChart = React6.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? generateBarChartDescription(title, data) : void 0);
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       ChartContainer,
       {
         ref,
@@ -659,8 +926,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__ */ jsx6("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -668,15 +937,27 @@ var BarChart = React6.forwardRef(
 BarChart.displayName = "BarChart";
 
 // src/components/core/PieChart.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import * as echarts5 from "echarts/core";
 import { PieChart as EChartsPieChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent3, LegendComponent as LegendComponent3, TitleComponent as TitleComponent3 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer3 } from "echarts/renderers";
-import { generatePieChartDescription } from "@classic-homes/charts-core";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel3,
+  buildLegend as buildLegend3,
+  buildTooltip as buildTooltip3,
+  escapeHtml,
+  formatTooltipValue,
+  generatePieChartDescription,
+  getChartColors as getChartColors3,
+  itemLabelLookup,
+  legendCenter,
+  mergeChartOption as mergeChartOption3,
+  pointLabel
+} from "@classic-homes/charts-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
 echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer3]);
-var PieChart = React7.forwardRef(
+var PieChart = React8.forwardRef(
   ({
     title,
     description,
@@ -692,58 +973,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: getChartColors3(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 `${escapeHtml(p.seriesName)} <br/>${escapeHtml(p.name)}: ${escapeHtml(formatTooltipValue(p.value, valueFormatter))} (${p.percent}%)`;
+        } : "{a} <br/>{b}: {c} ({d}%)"
+      };
+      return mergeChartOption3(
+        {
+          tooltip: buildTooltip3(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel: itemLabelLookup(data)
+          }),
+          legend: buildLegend3(
+            data.map((d) => d.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend, defaults: { orient: "horizontal" } }
+          ),
+          series: [
+            {
+              name: title,
+              type: "pie",
+              radius: innerRadius ? [innerRadius, "70%"] : "70%",
+              center: 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: pointLabel(item.label, labelFormatter, { position: labelPosition })
+              })),
+              label: buildDataLabel3(
+                {
+                  show: true,
+                  position: labelPosition,
+                  formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel: 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;
@@ -759,7 +1089,7 @@ var PieChart = React7.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription(title, data, false) : void 0);
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       ChartContainer,
       {
         ref,
@@ -771,8 +1101,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__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -780,7 +1112,7 @@ var PieChart = React7.forwardRef(
 PieChart.displayName = "PieChart";
 
 // src/components/core/AreaChart.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import * as echarts6 from "echarts/core";
 import { LineChart as EChartsLineChart2 } from "echarts/charts";
 import {
@@ -790,8 +1122,21 @@ import {
   TitleComponent as TitleComponent4
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer4 } from "echarts/renderers";
-import { colorWithAlpha, getChartColors as getChartColors2, THEME_DARK as THEME_DARK3 } from "@classic-homes/charts-core";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis3,
+  buildDataLabel as buildDataLabel4,
+  buildLegend as buildLegend4,
+  buildTooltip as buildTooltip4,
+  colorWithAlpha,
+  getChartColors as getChartColors4,
+  hasPointLabels as hasPointLabels2,
+  gridInset as gridInset3,
+  mergeChartOption as mergeChartOption4,
+  seriesLabelLookup as seriesLabelLookup3,
+  THEME_DARK as THEME_DARK3,
+  withPointLabels as withPointLabels3
+} from "@classic-homes/charts-core";
+import { jsx as jsx9 } from "react/jsx-runtime";
 echarts6.use([
   EChartsLineChart2,
   GridComponent3,
@@ -800,7 +1145,7 @@ echarts6.use([
   TitleComponent4,
   CanvasRenderer4
 ]);
-var AreaChart = React8.forwardRef(
+var AreaChart = React9.forwardRef(
   ({
     title,
     description,
@@ -817,76 +1162,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 = getChartColors2(currentTheme);
-    const option = React8.useMemo(() => {
+    const chartColors = getChartColors4(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 = seriesLabelLookup3(data.series);
+      const showSymbol = showLabels || hasPointLabels2(data.series);
+      return mergeChartOption4(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset3(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip4(
+            {
+              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: colorWithAlpha(base, 0.8) },
-                { offset: 1, color: colorWithAlpha(base, 0.1) }
-              ])
-            } : { opacity: 0.5 },
-            itemStyle: series.color ? { color: series.color } : void 0,
-            emphasis: {
-              focus: "series"
+          ),
+          legend: buildLegend4(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis3(
+            {
+              type: "category",
+              boundaryGap: false,
+              data: data.categories
             },
-            showSymbol: false
-          };
-        })
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, smooth, stacked, gradient, chartColors]);
+            xAxisConfig
+          ),
+          yAxis: buildAxis3(
+            {
+              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: withPointLabels3(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: colorWithAlpha(base, 0.8) },
+                  { offset: 1, color: colorWithAlpha(base, 0.1) }
+                ])
+              } : { opacity: 0.5 },
+              itemStyle: series.color ? { color: series.color } : void 0,
+              label: buildDataLabel4({ 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 === THEME_DARK3 ? "dark" : "light",
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -904,7 +1316,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__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       ChartContainer,
       {
         ref,
@@ -916,8 +1328,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__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -925,7 +1339,7 @@ var AreaChart = React8.forwardRef(
 AreaChart.displayName = "AreaChart";
 
 // src/components/core/ScatterChart.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import * as echarts7 from "echarts/core";
 import { ScatterChart as EChartsScatterChart, LineChart as EChartsLineChart3 } from "echarts/charts";
 import {
@@ -935,8 +1349,21 @@ import {
   TitleComponent as TitleComponent5
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer5 } from "echarts/renderers";
-import { escapeHtml, generateScatterChartDescription } from "@classic-homes/charts-core";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis4,
+  buildDataLabel as buildDataLabel5,
+  buildLegend as buildLegend5,
+  buildTooltip as buildTooltip5,
+  escapeHtml as escapeHtml2,
+  formatTooltipValue as formatTooltipValue2,
+  generateScatterChartDescription,
+  getChartColors as getChartColors5,
+  gridInset as gridInset4,
+  mergeChartOption as mergeChartOption5,
+  seriesLabelLookup as seriesLabelLookup4,
+  withPointLabels as withPointLabels4
+} from "@classic-homes/charts-core";
+import { jsx as jsx10 } from "react/jsx-runtime";
 echarts7.use([
   EChartsScatterChart,
   // Trend lines are line series
@@ -947,7 +1374,7 @@ echarts7.use([
   TitleComponent5,
   CanvasRenderer5
 ]);
-var ScatterChart = React9.forwardRef(
+var ScatterChart = React10.forwardRef(
   ({
     title,
     description,
@@ -963,19 +1390,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: getChartColors5(currentTheme).series,
+      config: legendConfig,
+      title,
+      onLegendChange
+    });
+    const customLegend = renderLegend !== void 0;
+    const option = React10.useMemo(() => {
       if (isEmpty) return {};
+      const getLabel = seriesLabelLookup4(data.series);
       const series = data.series.map((s) => ({
         name: s.name,
         type: "scatter",
-        data: s.data,
+        data: withPointLabels4(s.data, s.labels, labelFormatter, { position: "top" }),
         symbolSize: typeof symbolSize === "function" ? symbolSize : symbolSize,
         itemStyle: s.color ? { color: s.color } : void 0,
+        label: buildDataLabel5({ show: true, position: "top" }, void 0, {
+          show: showLabels,
+          formatter: labelFormatter,
+          getLabel
+        }),
         emphasis: {
           focus: "series",
           itemStyle: {
@@ -1023,46 +1476,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 `${escapeHtml(p.seriesName)}<br/>X: ${escapeHtml(p.value[0])}<br/>Y: ${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
-          }
-        },
-        series
-      };
-    }, [data, isEmpty, showTooltip, showLegend, showGrid, showTrendLine, symbolSize]);
+      return mergeChartOption5(
+        {
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+            ...gridInset4(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+          },
+          tooltip: buildTooltip5(
+            {
+              trigger: "item",
+              formatter: (params) => {
+                const p = params;
+                if (!p.value) return "";
+                const x = formatTooltipValue2(p.value[0], tooltipValueFormatter);
+                const y = formatTooltipValue2(p.value[1], tooltipValueFormatter);
+                return `${escapeHtml2(p.seriesName)}<br/>X: ${escapeHtml2(x)}<br/>Y: ${escapeHtml2(y)}`;
+              }
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter,
+              getLabel
+            }
+          ),
+          legend: buildLegend5(
+            data.series.map((s) => s.name),
+            legendConfig,
+            { show: showLegend, custom: customLegend }
+          ),
+          xAxis: buildAxis4(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis4(
+            {
+              type: "value",
+              splitLine: {
+                show: showGrid
+              }
+            },
+            yAxisConfig
+          ),
+          series
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      showLegend,
+      showGrid,
+      showTrendLine,
+      symbolSize,
+      showLabels,
+      labelFormatter,
+      xAxisConfig,
+      yAxisConfig,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
+    ]);
     const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
       theme,
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -1080,7 +1572,7 @@ var ScatterChart = React9.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? generateScatterChartDescription(title, data) : void 0);
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       ChartContainer,
       {
         ref,
@@ -1092,8 +1584,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__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1101,19 +1595,29 @@ var ScatterChart = React9.forwardRef(
 ScatterChart.displayName = "ScatterChart";
 
 // src/components/core/DonutChart.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import * as echarts8 from "echarts/core";
 import { PieChart as EChartsPieChart2 } from "echarts/charts";
 import { TooltipComponent as TooltipComponent6, LegendComponent as LegendComponent6, TitleComponent as TitleComponent6 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer6 } from "echarts/renderers";
 import {
+  buildDataLabel as buildDataLabel6,
+  buildLegend as buildLegend6,
+  buildTooltip as buildTooltip6,
+  escapeHtml as escapeHtml3,
+  formatTooltipValue as formatTooltipValue3,
   generatePieChartDescription as generatePieChartDescription2,
-  getChartColors as getChartColors3,
+  getChartColors as getChartColors6,
+  itemLabelLookup as itemLabelLookup2,
+  anchorCenterGraphic,
+  legendCenter as legendCenter2,
+  mergeChartOption as mergeChartOption6,
+  pointLabel as pointLabel2,
   THEME_DARK as THEME_DARK4
 } from "@classic-homes/charts-core";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer6]);
-var DonutChart = React10.forwardRef(
+var DonutChart = React11.forwardRef(
   ({
     title,
     description,
@@ -1131,95 +1635,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 = getChartColors3(currentTheme);
-    const option = React10.useMemo(() => {
+    const chartColors = getChartColors6(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 = legendCenter2(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(
+          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 `${escapeHtml3(p.seriesName)} <br/>${escapeHtml3(p.name)}: ${escapeHtml3(formatTooltipValue3(p.value, valueFormatter))} (${p.percent}%)`;
+        } : "{a} <br/>{b}: {c} ({d}%)"
+      };
+      return mergeChartOption6(
+        {
+          tooltip: buildTooltip6(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel: itemLabelLookup2(data)
+          }),
+          legend: buildLegend6(
+            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: pointLabel2(item.label, labelFormatter, { position: labelPosition })
+              })),
+              label: buildDataLabel6(
+                {
+                  show: true,
+                  position: labelPosition,
+                  formatter: labelPosition === "inside" ? "{d}%" : "{b}: {d}%"
+                },
+                { show: false },
+                { show: showLabels, formatter: labelFormatter, getLabel: itemLabelLookup2(data) }
+              ),
+              labelLine: {
+                show: showLabels && labelPosition === "outside"
+              },
+              emphasis: {
+                itemStyle: {
+                  shadowBlur: 10,
+                  shadowOffsetX: 0,
+                  shadowColor: "rgba(0, 0, 0, 0.5)"
+                }
               }
             }
-          }
-        ]
-      };
+          ]
+        },
+        optionOverride
+      );
     }, [
       data,
       isEmpty,
@@ -1231,7 +1774,13 @@ var DonutChart = React10.forwardRef(
       centerLabel,
       centerValue,
       title,
-      chartColors
+      chartColors,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      legendConfig,
+      customLegend,
+      optionOverride
     ]);
     const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
@@ -1239,6 +1788,7 @@ var DonutChart = React10.forwardRef(
       theme: currentTheme === THEME_DARK4 ? "dark" : "light",
       animation,
       onReady: (chart) => {
+        legend.attach(chart);
         chart.on("click", (params) => {
           const { onClick: onClick2 } = latest.current;
           if (!onClick2) return;
@@ -1254,7 +1804,7 @@ var DonutChart = React10.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription2(title, data, true) : void 0);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       ChartContainer,
       {
         ref,
@@ -1266,8 +1816,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__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1275,7 +1827,7 @@ var DonutChart = React10.forwardRef(
 DonutChart.displayName = "DonutChart";
 
 // src/components/extended/RadarChart.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import * as echarts9 from "echarts/core";
 import { RadarChart as EChartsRadarChart } from "echarts/charts";
 import {
@@ -1285,7 +1837,15 @@ import {
   RadarComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer7 } from "echarts/renderers";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel7,
+  buildLegend as buildLegend7,
+  buildTooltip as buildTooltip7,
+  getChartColors as getChartColors7,
+  legendCenter as legendCenter3,
+  mergeChartOption as mergeChartOption7
+} from "@classic-homes/charts-core";
+import { jsx as jsx12 } from "react/jsx-runtime";
 echarts9.use([
   EChartsRadarChart,
   TooltipComponent7,
@@ -1294,7 +1854,7 @@ echarts9.use([
   RadarComponent,
   CanvasRenderer7
 ]);
-var RadarChart = React11.forwardRef(
+var RadarChart = React12.forwardRef(
   ({
     title,
     description,
@@ -1309,50 +1869,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: getChartColors7(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 mergeChartOption7(
+        {
+          tooltip: buildTooltip7(
+            {
+              trigger: "item"
+            },
+            {
+              show: showTooltip,
+              formatter: tooltipFormatter,
+              valueFormatter: tooltipValueFormatter
+            }
+          ),
+          legend: buildLegend7(
+            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: legendCenter3(legendConfig, showLegend && !customLegend, ["50%", "50%"])
+          },
+          series: [
+            {
+              type: "radar",
+              label: buildDataLabel7({ 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__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       ChartContainer,
       {
         ref,
@@ -1364,8 +1975,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__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1373,12 +1986,23 @@ var RadarChart = React11.forwardRef(
 RadarChart.displayName = "RadarChart";
 
 // src/components/extended/FunnelChart.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import * as echarts10 from "echarts/core";
 import { FunnelChart as EChartsFunnelChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent8, LegendComponent as LegendComponent8, TitleComponent as TitleComponent8 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer8 } from "echarts/renderers";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import {
+  buildDataLabel as buildDataLabel8,
+  buildLegend as buildLegend8,
+  buildTooltip as buildTooltip8,
+  escapeHtml as escapeHtml4,
+  formatTooltipValue as formatTooltipValue4,
+  getChartColors as getChartColors8,
+  itemLabelLookup as itemLabelLookup3,
+  mergeChartOption as mergeChartOption8,
+  pointLabel as pointLabel3
+} from "@classic-homes/charts-core";
+import { jsx as jsx13 } from "react/jsx-runtime";
 echarts10.use([
   EChartsFunnelChart,
   TooltipComponent8,
@@ -1386,7 +2010,7 @@ echarts10.use([
   TitleComponent8,
   CanvasRenderer8
 ]);
-var FunnelChart = React12.forwardRef(
+var FunnelChart = React13.forwardRef(
   ({
     title,
     description,
@@ -1402,68 +2026,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: getChartColors8(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 = itemLabelLookup3(data);
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const tooltipBase = {
+        trigger: "item",
+        formatter: valueFormatter ? (params) => {
+          const p = params;
+          return `${escapeHtml4(p.seriesName)} <br/>${escapeHtml4(p.name)}: ${escapeHtml4(formatTooltipValue4(p.value, valueFormatter))}`;
+        } : "{a} <br/>{b}: {c}"
       };
-    }, [data, isEmpty, showTooltip, showLegend, sort, orientation, showLabels, title]);
+      return mergeChartOption8(
+        {
+          tooltip: buildTooltip8(tooltipBase, {
+            show: showTooltip,
+            formatter: tooltipFormatter,
+            valueFormatter: tooltipValueFormatter,
+            getLabel
+          }),
+          legend: buildLegend8(
+            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: buildDataLabel8(
+                {
+                  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: pointLabel3(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;
@@ -1478,7 +2153,7 @@ var FunnelChart = React12.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : void 0);
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       ChartContainer,
       {
         ref,
@@ -1490,8 +2165,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__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1499,15 +2176,20 @@ var FunnelChart = React12.forwardRef(
 FunnelChart.displayName = "FunnelChart";
 
 // src/components/extended/GaugeChart.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import * as echarts11 from "echarts/core";
 import { GaugeChart as EChartsGaugeChart } from "echarts/charts";
-import { TitleComponent as TitleComponent9 } from "echarts/components";
+import { TitleComponent as TitleComponent9, TooltipComponent as TooltipComponent9 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer9 } from "echarts/renderers";
-import { getChartColors as getChartColors4, THEME_DARK as THEME_DARK5 } from "@classic-homes/charts-core";
-import { jsx as jsx13 } from "react/jsx-runtime";
-echarts11.use([EChartsGaugeChart, TitleComponent9, CanvasRenderer9]);
-var GaugeChart = React13.forwardRef(
+import {
+  buildTooltip as buildTooltip9,
+  getChartColors as getChartColors9,
+  mergeChartOption as mergeChartOption9,
+  THEME_DARK as THEME_DARK5
+} from "@classic-homes/charts-core";
+import { jsx as jsx14 } from "react/jsx-runtime";
+echarts11.use([EChartsGaugeChart, TitleComponent9, TooltipComponent9, CanvasRenderer9]);
+var GaugeChart = React14.forwardRef(
   ({
     title,
     description,
@@ -1523,84 +2205,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 = getChartColors4(currentTheme);
+    const chartColors = getChartColors9(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 mergeChartOption9(
+        {
+          // No tooltip by default; one appears once its content is customised
+          tooltip: tooltipFormatter || tooltipValueFormatter ? buildTooltip9(
+            { 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,
@@ -1611,7 +2309,11 @@ var GaugeChart = React13.forwardRef(
       title,
       animation,
       reducedMotion,
-      chartColors
+      chartColors,
+      showTooltip,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
     ]);
     const { containerRef } = useChart({
       option,
@@ -1619,7 +2321,7 @@ var GaugeChart = React13.forwardRef(
       animation
     });
     const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       ChartContainer,
       {
         ref,
@@ -1631,7 +2333,7 @@ var GaugeChart = React13.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1639,27 +2341,34 @@ var GaugeChart = React13.forwardRef(
 GaugeChart.displayName = "GaugeChart";
 
 // src/components/extended/HeatmapChart.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import * as echarts12 from "echarts/core";
 import { HeatmapChart as EChartsHeatmapChart } from "echarts/charts";
 import {
   GridComponent as GridComponent5,
-  TooltipComponent as TooltipComponent9,
+  TooltipComponent as TooltipComponent10,
   TitleComponent as TitleComponent10,
   VisualMapComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer10 } from "echarts/renderers";
-import { escapeHtml as escapeHtml2 } from "@classic-homes/charts-core";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis5,
+  buildDataLabel as buildDataLabel9,
+  buildTooltip as buildTooltip10,
+  escapeHtml as escapeHtml5,
+  formatTooltipValue as formatTooltipValue5,
+  mergeChartOption as mergeChartOption10
+} from "@classic-homes/charts-core";
+import { jsx as jsx15 } from "react/jsx-runtime";
 echarts12.use([
   EChartsHeatmapChart,
   GridComponent5,
-  TooltipComponent9,
+  TooltipComponent10,
   TitleComponent10,
   VisualMapComponent,
   CanvasRenderer10
 ]);
-var HeatmapChart = React14.forwardRef(
+var HeatmapChart = React15.forwardRef(
   ({
     title,
     description,
@@ -1674,6 +2383,12 @@ var HeatmapChart = React14.forwardRef(
     animation = true,
     showTooltip = true,
     showValues = false,
+    labelFormatter,
+    xAxisConfig,
+    yAxisConfig,
+    tooltipFormatter,
+    tooltipValueFormatter,
+    option: optionOverride,
     onClick,
     class: className,
     ...props
@@ -1687,64 +2402,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 `${escapeHtml2(xAxis[xIdx])} / ${escapeHtml2(yAxis[yIdx])}: ${escapeHtml2(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 mergeChartOption10(
+        {
+          tooltip: buildTooltip10(
+            {
+              position: "top",
+              formatter: (params) => {
+                const p = params;
+                if (!p.value) return "";
+                const [xIdx, yIdx, value] = p.value;
+                return `${escapeHtml5(xAxis[xIdx])} / ${escapeHtml5(yAxis[yIdx])}: ${escapeHtml5(formatTooltipValue5(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: buildAxis5(
+            {
+              type: "category",
+              data: xAxis,
+              splitArea: {
+                show: true
+              }
+            },
+            xAxisConfig
+          ),
+          yAxis: buildAxis5(
+            {
+              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: buildDataLabel9({ 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,
@@ -1768,7 +2516,7 @@ var HeatmapChart = React14.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.` : void 0);
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       ChartContainer,
       {
         ref,
@@ -1781,7 +2529,7 @@ var HeatmapChart = React14.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1789,15 +2537,25 @@ var HeatmapChart = React14.forwardRef(
 HeatmapChart.displayName = "HeatmapChart";
 
 // src/components/extended/TreemapChart.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import * as echarts13 from "echarts/core";
 import { TreemapChart as EChartsTreemapChart } from "echarts/charts";
-import { TooltipComponent as TooltipComponent10, TitleComponent as TitleComponent11 } from "echarts/components";
+import { TooltipComponent as TooltipComponent11, TitleComponent as TitleComponent11 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer11 } from "echarts/renderers";
-import { escapeHtml as escapeHtml3, getChartColors as getChartColors5, THEME_DARK as THEME_DARK6 } from "@classic-homes/charts-core";
-import { jsx as jsx15 } from "react/jsx-runtime";
-echarts13.use([EChartsTreemapChart, TooltipComponent10, TitleComponent11, CanvasRenderer11]);
-var TreemapChart = React15.forwardRef(
+import {
+  buildDataLabel as buildDataLabel10,
+  buildTooltip as buildTooltip11,
+  escapeHtml as escapeHtml6,
+  formatTooltipValue as formatTooltipValue6,
+  getChartColors as getChartColors10,
+  mergeChartOption as mergeChartOption11,
+  nameLabelLookup,
+  pointLabel as pointLabel4,
+  THEME_DARK as THEME_DARK6
+} from "@classic-homes/charts-core";
+import { jsx as jsx16 } from "react/jsx-runtime";
+echarts13.use([EChartsTreemapChart, TooltipComponent11, TitleComponent11, CanvasRenderer11]);
+var TreemapChart = React16.forwardRef(
   ({
     title,
     description,
@@ -1810,69 +2568,99 @@ 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 = getChartColors5(currentTheme);
-    const option = React15.useMemo(() => {
+    const chartColors = getChartColors10(currentTheme);
+    const option = React16.useMemo(() => {
       if (isEmpty) return {};
-      return {
-        tooltip: showTooltip ? {
-          formatter: (params) => {
-            const p = params;
-            return `${escapeHtml3(p.name)}: ${escapeHtml3(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: pointLabel4(node.label, labelFormatter)
+      });
+      return mergeChartOption11(
+        {
+          tooltip: buildTooltip11(
+            {
+              formatter: (params) => {
+                const p = params;
+                return `${escapeHtml6(p.name)}: ${escapeHtml6(formatTooltipValue6(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: buildDataLabel10({ show: true, formatter: "{b}" }, void 0, {
+                show: true,
+                formatter: labelFormatter,
+                getLabel: 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,
@@ -1895,7 +2683,7 @@ var TreemapChart = React15.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Treemap chart showing hierarchical data.` : void 0);
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       ChartContainer,
       {
         ref,
@@ -1908,7 +2696,7 @@ var TreemapChart = React15.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1916,7 +2704,7 @@ var TreemapChart = React15.forwardRef(
 TreemapChart.displayName = "TreemapChart";
 
 // src/components/extended/CandlestickChart.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import * as echarts14 from "echarts/core";
 import {
   CandlestickChart as EChartsCandlestickChart,
@@ -1924,23 +2712,29 @@ import {
 } from "echarts/charts";
 import {
   GridComponent as GridComponent6,
-  TooltipComponent as TooltipComponent11,
+  TooltipComponent as TooltipComponent12,
   TitleComponent as TitleComponent12,
   DataZoomComponent
 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer12 } from "echarts/renderers";
-import { getChartColors as getChartColors6, THEME_DARK as THEME_DARK7 } from "@classic-homes/charts-core";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import {
+  buildAxis as buildAxis6,
+  buildTooltip as buildTooltip12,
+  getChartColors as getChartColors11,
+  mergeChartOption as mergeChartOption12,
+  THEME_DARK as THEME_DARK7
+} from "@classic-homes/charts-core";
+import { jsx as jsx17 } from "react/jsx-runtime";
 echarts14.use([
   EChartsCandlestickChart,
   EChartsBarChart2,
   GridComponent6,
-  TooltipComponent11,
+  TooltipComponent12,
   TitleComponent12,
   DataZoomComponent,
   CanvasRenderer12
 ]);
-var CandlestickChart = React16.forwardRef(
+var CandlestickChart = React17.forwardRef(
   ({
     title,
     description,
@@ -1953,14 +2747,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 = getChartColors6(currentTheme);
-    const option = React16.useMemo(() => {
+    const chartColors = getChartColors11(currentTheme);
+    const option = React17.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
       const seriesArr = [
@@ -1987,23 +2786,29 @@ var CandlestickChart = React16.forwardRef(
         }
       ];
       const xAxisArr = [
-        {
-          type: "category",
-          data: data.dates,
-          boundaryGap: false,
-          axisLine: { onZero: false },
-          splitLine: { show: false },
-          min: "dataMin",
-          max: "dataMax"
-        }
+        buildAxis6(
+          {
+            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
-          }
-        }
+        buildAxis6(
+          {
+            scale: true,
+            splitArea: {
+              show: true
+            }
+          },
+          yAxisConfig
+        )
       ];
       if (showVolume && data.volume) {
         gridArr.push({
@@ -2044,33 +2849,55 @@ 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 mergeChartOption12(
+        {
+          tooltip: buildTooltip12(
+            {
+              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,
@@ -2097,7 +2924,7 @@ var CandlestickChart = React16.forwardRef(
       }
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : void 0);
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       ChartContainer,
       {
         ref,
@@ -2110,7 +2937,7 @@ var CandlestickChart = React16.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2118,14 +2945,21 @@ var CandlestickChart = React16.forwardRef(
 CandlestickChart.displayName = "CandlestickChart";
 
 // src/components/extended/SankeyChart.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import * as echarts15 from "echarts/core";
 import { SankeyChart as EChartsSankeyChart } from "echarts/charts";
-import { TooltipComponent as TooltipComponent12, TitleComponent as TitleComponent13 } from "echarts/components";
+import { TooltipComponent as TooltipComponent13, TitleComponent as TitleComponent13 } from "echarts/components";
 import { CanvasRenderer as CanvasRenderer13 } from "echarts/renderers";
-import { jsx as jsx17 } from "react/jsx-runtime";
-echarts15.use([EChartsSankeyChart, TooltipComponent12, TitleComponent13, CanvasRenderer13]);
-var SankeyChart = React17.forwardRef(
+import {
+  buildDataLabel as buildDataLabel11,
+  buildTooltip as buildTooltip13,
+  mergeChartOption as mergeChartOption13,
+  nameLabelLookup as nameLabelLookup2,
+  pointLabel as pointLabel5
+} from "@classic-homes/charts-core";
+import { jsx as jsx18 } from "react/jsx-runtime";
+echarts15.use([EChartsSankeyChart, TooltipComponent13, TitleComponent13, CanvasRenderer13]);
+var SankeyChart = React18.forwardRef(
   ({
     title,
     description,
@@ -2138,45 +2972,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 mergeChartOption13(
+        {
+          tooltip: buildTooltip13(
+            {
+              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: pointLabel5(node.label, labelFormatter)
+              })),
+              links: data.links.map((link) => ({
+                source: link.source,
+                target: link.target,
+                value: link.value
+              })),
+              lineStyle: {
+                color: "gradient",
+                curveness: 0.5
+              },
+              label: buildDataLabel11(
+                {
+                  position: orient === "horizontal" ? "right" : "bottom"
+                },
+                void 0,
+                { show: true, formatter: labelFormatter, getLabel: nameLabelLookup2(data.nodes) }
+              )
+            }
+          ]
+        },
+        optionOverride
+      );
+    }, [
+      data,
+      isEmpty,
+      showTooltip,
+      orient,
+      labelFormatter,
+      tooltipFormatter,
+      tooltipValueFormatter,
+      optionOverride
+    ]);
     const latest = useLatestRef({ onClick });
     const { containerRef } = useChart({
       option,
@@ -2200,7 +3062,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__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       ChartContainer,
       {
         ref,
@@ -2213,7 +3075,7 @@ var SankeyChart = React17.forwardRef(
         emptyMessage,
         className: cn(className),
         ...props,
-        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx18("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2226,6 +3088,7 @@ export {
   ChartContainer,
   ChartEmpty,
   ChartError,
+  ChartLegend,
   ChartSkeleton,
   DonutChart,
   FunnelChart,
@@ -2240,6 +3103,7 @@ export {
   cn,
   registerClassicThemes,
   useChart,
+  useChartLegend,
   useChartResize,
   useChartTheme,
   useReducedMotion