@classic-homes/charts-react 0.2.2 → 0.4.0

package/dist/index.js

@@ -1,5 +1,10 @@
 // src/components/base/ChartContainer.tsx
 import * as React4 from "react";
+import {
+  chartFilename,
+  downloadCsv,
+  downloadFile
+} from "@classic-homes/charts-core";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -83,7 +88,7 @@ var ChartError = React2.forwardRef(
             {
               type: "button",
               onClick: onRetry,
-              className: "rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground transition-colors hover:bg-destructive/90",
+              className: "rounded-md bg-destructive px-3 py-1.5 text-xs font-medium text-destructive-foreground hover:bg-destructive/90",
               children: "Retry"
             }
           )
@@ -139,20 +144,64 @@ var ChartEmpty = React3.forwardRef(
 );
 ChartEmpty.displayName = "ChartEmpty";
 
-// src/components/base/ChartContainer.tsx
+// src/components/base/ChartDataTable.tsx
+import {
+  formatTableCell
+} from "@classic-homes/charts-core";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ChartDataTable({
+  table,
+  caption,
+  format,
+  srOnly = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-testid": "chart-data-table",
+      className: cn(srOnly ? "sr-only" : "max-h-80 overflow-auto", className),
+      children: /* @__PURE__ */ jsxs4("table", { className: "w-full border-collapse text-sm", children: [
+        /* @__PURE__ */ jsx4("caption", { className: srOnly ? void 0 : "sr-only", children: caption }),
+        /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsx4("tr", { children: table.headers.map((header, column) => /* @__PURE__ */ jsx4(
+          "th",
+          {
+            scope: "col",
+            className: cn(
+              "sticky top-0 border-b border-border bg-card px-3 py-2 font-medium text-muted-foreground",
+              column === 0 ? "text-left" : "text-right"
+            ),
+            children: header
+          },
+          column
+        )) }) }),
+        /* @__PURE__ */ jsx4("tbody", { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ jsx4("tr", { className: "border-b border-border last:border-0", children: row.map(
+          (cell, column) => column === 0 ? /* @__PURE__ */ jsx4(
+            "th",
+            {
+              scope: "row",
+              className: "px-3 py-1.5 text-left font-normal text-foreground",
+              children: formatTableCell(table, cell, column, format)
+            },
+            column
+          ) : /* @__PURE__ */ jsx4("td", { className: "px-3 py-1.5 text-right tabular-nums text-foreground", children: formatTableCell(table, cell, column, format) }, column)
+        ) }, rowIndex)) })
+      ] })
+    }
+  );
+}
+
+// src/components/base/ChartContainer.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var CHART_ONLY_PROPS = [
-  "minHeight",
-  "maxHeight",
   "rowHeight",
   "showLegend",
   "showGrid",
   "valueFormat",
   "locale",
   "onReady",
+  "onHover",
   "events",
-  "showDataTable",
-  "exportable",
   "patterns",
   "referenceLines",
   "referenceBands",
@@ -165,11 +214,15 @@ function domProps(props) {
   for (const key of CHART_ONLY_PROPS) delete rest[key];
   return rest;
 }
+var SR_TABLE_MAX_ROWS = 500;
+var buttonClass = "rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
 var ChartContainer = React4.forwardRef(
   ({
     title,
     description,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     empty,
@@ -179,16 +232,24 @@ var ChartContainer = React4.forwardRef(
     wrapperClassName,
     legend,
     legendPosition = "bottom",
+    dataTable,
+    showDataTable = "sr-only",
+    format,
+    exportable,
+    exportImage,
     children,
     ...props
   }, ref) => {
     const heightStyle = typeof height === "number" ? `${height}px` : height;
-    const descriptionId = `${React4.useId()}-desc`;
+    const uid = React4.useId();
+    const descriptionId = `${uid}-desc`;
+    const tableId = `${uid}-table`;
+    const [tableOpen, setTableOpen] = React4.useState(false);
     if (loading) {
-      return /* @__PURE__ */ jsx4(ChartSkeleton, { height, className: wrapperClassName });
+      return /* @__PURE__ */ jsx5(ChartSkeleton, { height, className: wrapperClassName });
     }
     if (error) {
-      return /* @__PURE__ */ jsx4(
+      return /* @__PURE__ */ jsx5(
         ChartError,
         {
           message: error,
@@ -199,9 +260,19 @@ var ChartContainer = React4.forwardRef(
       );
     }
     if (empty) {
-      return /* @__PURE__ */ jsx4(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
+      return /* @__PURE__ */ jsx5(ChartEmpty, { message: emptyMessage, height, className: wrapperClassName });
     }
-    const chart = /* @__PURE__ */ jsxs4(
+    const exportConfig = exportable ? exportable === true ? {} : exportable : void 0;
+    const canExportImage = !!exportConfig && exportConfig.image !== false && !!exportImage;
+    const canExportCsv = !!exportConfig && exportConfig.csv !== false && !!dataTable;
+    const filename = exportConfig?.filename ?? chartFilename(title);
+    const toggleTable = showDataTable === true && !!dataTable;
+    const toolbar = canExportImage || canExportCsv || toggleTable;
+    const downloadImage = () => {
+      const url = exportImage?.();
+      if (url) downloadFile(url, `${filename}.png`);
+    };
+    const chart = (chartClassName) => /* @__PURE__ */ jsxs5(
       "div",
       {
         ref,
@@ -209,37 +280,95 @@ var ChartContainer = React4.forwardRef(
         "aria-label": title,
         "aria-describedby": description ? descriptionId : void 0,
         "data-testid": "chart-container",
-        className: legend ? "min-h-0 min-w-0 flex-1" : cn("rounded-lg border border-border bg-card", wrapperClassName),
+        className: chartClassName,
         ...domProps(props),
         children: [
-          description && /* @__PURE__ */ jsx4("span", { id: descriptionId, className: "sr-only", children: description }),
-          /* @__PURE__ */ jsx4("div", { className: cn("h-full w-full", className), style: { height: heightStyle }, children })
+          description && /* @__PURE__ */ jsx5("span", { id: descriptionId, className: "sr-only", children: description }),
+          /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: cn("h-full w-full", className),
+              style: {
+                height: heightStyle,
+                minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
+                maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0
+              },
+              children
+            }
+          )
         ]
       }
     );
-    if (!legend) return chart;
+    const srTable = dataTable && showDataTable === "sr-only" && dataTable.rows.length <= SR_TABLE_MAX_ROWS ? /* @__PURE__ */ jsx5(ChartDataTable, { table: dataTable, caption: `${title} data`, format, srOnly: true }) : null;
+    if (!legend && !toolbar) {
+      return /* @__PURE__ */ jsxs5(Fragment, { children: [
+        chart(cn("rounded-lg border border-border bg-card", wrapperClassName)),
+        srTable
+      ] });
+    }
     const side = legendPosition === "left" || legendPosition === "right";
     const leading = legendPosition === "top" || legendPosition === "left";
-    const legendNode = /* @__PURE__ */ jsx4(
+    const legendNode = legend ? /* @__PURE__ */ jsx5(
       "div",
       {
         "data-testid": "chart-legend",
         className: cn("flex shrink-0 p-2", side ? "items-center" : "justify-center"),
         children: legend
       }
-    );
-    return /* @__PURE__ */ jsxs4(
+    ) : null;
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
-        className: cn(
-          "flex rounded-lg border border-border bg-card",
-          side ? "flex-row" : "flex-col",
-          wrapperClassName
-        ),
+        "data-testid": "chart-frame",
+        className: cn("flex flex-col rounded-lg border border-border bg-card", wrapperClassName),
         children: [
-          leading && legendNode,
-          chart,
-          !leading && legendNode
+          toolbar && /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              "data-testid": "chart-toolbar",
+              className: "flex justify-end gap-1 px-2 pt-2 print:hidden",
+              children: [
+                toggleTable && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: buttonClass,
+                    "aria-expanded": tableOpen,
+                    "aria-controls": tableId,
+                    onClick: () => setTableOpen((open) => !open),
+                    children: tableOpen ? "Hide data" : "Show data"
+                  }
+                ),
+                canExportImage && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: buttonClass,
+                    "aria-label": `Download ${title} as PNG`,
+                    onClick: downloadImage,
+                    children: "PNG"
+                  }
+                ),
+                canExportCsv && /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: buttonClass,
+                    "aria-label": `Download ${title} data as CSV`,
+                    onClick: () => downloadCsv(dataTable, filename),
+                    children: "CSV"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: cn("flex min-h-0 flex-1", side ? "flex-row" : "flex-col"), children: [
+            leading && legendNode,
+            chart("min-h-0 min-w-0 flex-1"),
+            !leading && legendNode
+          ] }),
+          toggleTable && /* @__PURE__ */ jsx5("div", { id: tableId, hidden: !tableOpen, className: "border-t border-border p-2", children: tableOpen && /* @__PURE__ */ jsx5(ChartDataTable, { table: dataTable, caption: `${title} data`, format }) }),
+          srTable
         ]
       }
     );
@@ -249,11 +378,11 @@ ChartContainer.displayName = "ChartContainer";
 
 // src/components/base/ChartLegend.tsx
 import * as React5 from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } 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(
+    return /* @__PURE__ */ jsx6(
       "ul",
       {
         ref,
@@ -263,7 +392,7 @@ var ChartLegend = React5.forwardRef(
           vertical ? "flex-col" : "flex-wrap justify-center",
           className
         ),
-        children: items.map((item) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs5(
+        children: items.map((item) => /* @__PURE__ */ jsx6("li", { children: /* @__PURE__ */ jsxs6(
           "button",
           {
             type: "button",
@@ -274,7 +403,7 @@ var ChartLegend = React5.forwardRef(
               item.visible ? "text-foreground" : "text-muted-foreground line-through"
             ),
             children: [
-              /* @__PURE__ */ jsx5(
+              /* @__PURE__ */ jsx6(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -302,29 +431,90 @@ import {
   LegendComponent,
   TitleComponent
 } from "echarts/components";
-import { CanvasRenderer } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer2 } from "echarts/renderers";
 import {
   buildAxis,
   buildDataLabel,
+  buildDataZoom,
   buildLegend,
   buildTooltip,
+  categoryTable,
+  chartFormatters,
   generateLineChartDescription,
   getChartColors,
   hasPointLabels,
   gridInset,
   mergeChartOption,
+  resolveValueFormatter,
   seriesLabelLookup,
   THEME_DARK as THEME_DARK2,
-  withPointLabels
+  toPercentStack,
+  withPointLabels,
+  withReferenceMarks,
+  withZoomInset
 } from "@classic-homes/charts-core";
 
+// src/lib/events.ts
+var raw = (params) => params ?? {};
+function toDataPointParams(params, fallbackType) {
+  const p = raw(params);
+  return {
+    type: p.type || fallbackType,
+    componentType: p.componentType || "series",
+    seriesIndex: p.seriesIndex,
+    seriesName: p.seriesName || "",
+    dataIndex: p.dataIndex ?? 0,
+    name: p.name || "",
+    value: p.value,
+    color: typeof p.color === "string" ? p.color : void 0,
+    event: p.event?.event
+  };
+}
+function toSliceParams(params, fallbackType) {
+  const p = raw(params);
+  return {
+    type: p.type || fallbackType,
+    componentType: p.componentType || "series",
+    seriesIndex: p.seriesIndex,
+    seriesName: p.seriesName,
+    dataIndex: p.dataIndex,
+    name: p.name || "",
+    value: p.value,
+    percent: p.percent,
+    color: typeof p.color === "string" ? p.color : void 0,
+    event: p.event?.event
+  };
+}
+function chartEvents(events, mapped) {
+  const merged = { ...events };
+  for (const [name, handler] of Object.entries(mapped)) {
+    if (!handler) continue;
+    const own = events?.[name];
+    merged[name] = own ? (params) => {
+      handler(params);
+      own(params);
+    } : handler;
+  }
+  return merged;
+}
+
 // src/hooks/useChart.ts
-import { useEffect as useEffect4, useRef } from "react";
+import { useCallback, useEffect as useEffect4, useRef, useState as useState5 } from "react";
 import * as echarts2 from "echarts/core";
+import {
+  AriaComponent,
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
+  DatasetComponent,
+  GraphicComponent,
+  MarkAreaComponent,
+  MarkLineComponent
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
 import { getReplaceMerge } from "@classic-homes/charts-core";
 
 // src/hooks/useChartTheme.ts
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 import * as echarts from "echarts/core";
 import { lightTheme, darkTheme, THEME_LIGHT, THEME_DARK } from "@classic-homes/charts-core";
 var themesRegistered = false;
@@ -342,7 +532,7 @@ function resolveTheme(preference) {
   return document.documentElement.classList.contains("dark") ? THEME_DARK : THEME_LIGHT;
 }
 function useChartTheme(preference = "auto") {
-  const [currentTheme, setCurrentTheme] = useState(() => resolveTheme(preference));
+  const [currentTheme, setCurrentTheme] = useState2(() => resolveTheme(preference));
   useEffect(() => {
     registerClassicThemes();
     const updateTheme = () => setCurrentTheme(resolveTheme(preference));
@@ -367,10 +557,10 @@ function useChartTheme(preference = "auto") {
 }
 
 // src/hooks/useChartResize.ts
-import { useEffect as useEffect2, useLayoutEffect, useState as useState2 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useState as useState3 } from "react";
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect2 : useLayoutEffect;
 function useRefElement(ref) {
-  const [element, setElement] = useState2(null);
+  const [element, setElement] = useState3(null);
   useIsomorphicLayoutEffect(() => {
     setElement(ref.current);
   });
@@ -399,9 +589,9 @@ function useChartResize(chartRef, containerRef) {
 }
 
 // src/hooks/useReducedMotion.ts
-import { useState as useState3, useEffect as useEffect3 } from "react";
+import { useState as useState4, useEffect as useEffect3 } from "react";
 function useReducedMotion() {
-  const [reducedMotion, setReducedMotion] = useState3(false);
+  const [reducedMotion, setReducedMotion] = useState4(false);
   useEffect3(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setReducedMotion(mediaQuery.matches);
@@ -417,6 +607,23 @@ function useReducedMotion() {
 }
 
 // src/hooks/useChart.ts
+echarts2.use([
+  AriaComponent,
+  DataZoomInsideComponent,
+  DataZoomSliderComponent,
+  DatasetComponent,
+  GraphicComponent,
+  MarkAreaComponent,
+  MarkLineComponent,
+  CanvasRenderer
+]);
+var registerEchartsModules = (modules) => echarts2.use(modules);
+function exportChartImage(chart, { type = "png", pixelRatio = 2, backgroundColor } = {}) {
+  if (!chart || chart.isDisposed()) return null;
+  const background = backgroundColor ?? (typeof document !== "undefined" ? getComputedStyle(chart.getDom()).getPropertyValue("--card").trim() : "");
+  const color = !background ? "#ffffff" : /^[\d.]+\s/.test(background) ? `hsl(${background})` : background;
+  return chart.getDataURL({ type, pixelRatio, backgroundColor: color });
+}
 var isComponentType = (mainType) => echarts2.ComponentModel.hasClass(mainType);
 function applyOption(chart, prev, next) {
   chart.setOption(next, {
@@ -424,56 +631,116 @@ function applyOption(chart, prev, next) {
     lazyUpdate: true
   });
 }
+function captureState(chart) {
+  if (chart.isDisposed()) return null;
+  const option = chart.getOption();
+  const selected = option.legend?.[0]?.selected ?? {};
+  return {
+    hidden: Object.keys(selected).filter((name) => selected[name] === false),
+    zoom: (option.dataZoom ?? []).map(({ start, end }) => ({ start, end }))
+  };
+}
+function restoreState(chart, state) {
+  if (!state) return;
+  for (const name of state.hidden) chart.dispatchAction({ type: "legendUnSelect", name });
+  state.zoom.forEach(({ start, end }, dataZoomIndex) => {
+    if (start !== void 0 && end !== void 0 && (start !== 0 || end !== 100)) {
+      chart.dispatchAction({ type: "dataZoom", dataZoomIndex, start, end });
+    }
+  });
+}
 function useChart({
   option,
   theme = "auto",
   animation,
-  onReady
+  patterns,
+  events,
+  onReady,
+  onCreated
 }) {
   const containerRef = useRef(null);
   const container = useRefElement(containerRef);
   const chartRef = useRef(null);
+  const [chart, setChart] = useState5(null);
   const currentTheme = useChartTheme(theme);
   const reducedMotion = useReducedMotion();
   const onReadyRef = useRef(onReady);
   onReadyRef.current = onReady;
+  const onCreatedRef = useRef(onCreated);
+  onCreatedRef.current = onCreated;
+  const eventsRef = useRef(events);
+  eventsRef.current = events;
   const optionRef = useRef(option);
   optionRef.current = {
     ...option,
     // Reduced motion always wins over the animation prop
-    animation: (animation ?? true) && !reducedMotion
+    animation: (animation ?? true) && !reducedMotion,
+    // Labels stay off: the container already describes the chart
+    ...patterns && {
+      aria: { enabled: true, label: { enabled: false }, decal: { show: true } }
+    }
   };
   const appliedRef = useRef(null);
+  const carriedRef = useRef(null);
   useEffect4(() => {
     if (!container) return;
-    const chart = echarts2.init(container, currentTheme);
-    chartRef.current = chart;
-    applyOption(chart, null, optionRef.current);
+    const instance = echarts2.init(container, currentTheme);
+    chartRef.current = instance;
+    onReadyRef.current?.(instance);
+    applyOption(instance, null, optionRef.current);
     appliedRef.current = optionRef.current;
-    onReadyRef.current?.(chart);
+    const carried = carriedRef.current;
+    carriedRef.current = null;
+    if (carried) instance.setOption({}, { lazyUpdate: false });
+    restoreState(instance, carried);
+    onCreatedRef.current?.(instance);
+    setChart(instance);
     return () => {
-      chart.dispose();
-      if (chartRef.current === chart) {
+      carriedRef.current = captureState(instance);
+      instance.dispose();
+      if (chartRef.current === instance) {
         chartRef.current = null;
       }
+      setChart((current) => current === instance ? null : current);
     };
   }, [container, currentTheme]);
   useEffect4(() => {
-    const chart = chartRef.current;
-    if (!chart || chart.isDisposed()) return;
-    applyOption(chart, appliedRef.current, optionRef.current);
+    const instance = chartRef.current;
+    if (!instance || instance.isDisposed()) return;
+    applyOption(instance, appliedRef.current, optionRef.current);
     appliedRef.current = optionRef.current;
-  }, [option, animation, reducedMotion]);
+  }, [option, animation, reducedMotion, patterns]);
+  const eventNames = JSON.stringify(
+    Object.keys(events ?? {}).filter((name) => events?.[name]).sort()
+  );
+  useEffect4(() => {
+    if (!chart || chart.isDisposed()) return;
+    const bound = JSON.parse(eventNames).map((name) => {
+      const listener = (params) => eventsRef.current?.[name]?.(params);
+      chart.on(name, listener);
+      return [name, listener];
+    });
+    return () => {
+      if (chart.isDisposed()) return;
+      for (const [name, listener] of bound) chart.off(name, listener);
+    };
+  }, [chart, eventNames]);
   useChartResize(chartRef, containerRef);
+  const exportImage = useCallback(
+    (options) => exportChartImage(chartRef.current, options),
+    []
+  );
   return {
     chartRef,
     containerRef,
-    currentTheme
+    chart,
+    currentTheme,
+    exportImage
   };
 }
 
 // src/hooks/useChartLegend.ts
-import { useCallback, useRef as useRef3, useState as useState4 } from "react";
+import { useCallback as useCallback2, useRef as useRef3, useState as useState6 } from "react";
 import {
   getLegendItems
 } from "@classic-homes/charts-core";
@@ -503,9 +770,9 @@ function useChartLegend({
   onLegendChange
 }) {
   const chartRef = useRef3(null);
-  const [visible, setVisible] = useState4({});
+  const [visible, setVisible] = useState6({});
   const latest = useLatestRef({ onLegendChange });
-  const attach = useCallback(
+  const attach = useCallback2(
     (chart) => {
       chartRef.current = chart;
       setVisible({});
@@ -541,14 +808,14 @@ function useChartLegend({
 }
 
 // src/components/core/LineChart.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 echarts3.use([
   EChartsLineChart,
   GridComponent,
   TooltipComponent,
   LegendComponent,
   TitleComponent,
-  CanvasRenderer
+  CanvasRenderer2
 ]);
 var LineChart = React6.forwardRef(
   ({
@@ -556,6 +823,8 @@ var LineChart = React6.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -568,22 +837,34 @@ var LineChart = React6.forwardRef(
     areaFilled = false,
     showDataPoints = false,
     stacked = false,
+    connectNulls = false,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
+    dataZoom,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const isPercent = stacked === "percent";
     const currentTheme = useChartTheme(theme);
     const chartColors = getChartColors(currentTheme);
     const legend = useChartLegend({
@@ -595,10 +876,41 @@ var LineChart = React6.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const builtInLegend = showLegend && !customLegend;
     const option = React6.useMemo(() => {
       if (isEmpty) return {};
+      const formatters = chartFormatters({
+        valueFormat: isPercent ? "percentValue" : valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const plotted = isPercent ? toPercentStack(data.series) : data.series;
       const getLabel = seriesLabelLookup(data.series);
       const showSymbol = showDataPoints || showLabels || hasPointLabels(data.series);
+      const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
+      const series = data.series.map((source, index) => ({
+        name: source.name,
+        type: "line",
+        data: withPointLabels(plotted[index].data, source.labels, formatters.label, {
+          position: "top"
+        }),
+        smooth,
+        showSymbol,
+        symbolSize: showDataPoints ? 6 : 0,
+        connectNulls,
+        stack: stacked ? "Total" : void 0,
+        areaStyle: areaFilled ? { opacity: 0.3 } : void 0,
+        itemStyle: source.color ? { color: source.color } : void 0,
+        label: buildDataLabel({ show: true, position: "top" }, void 0, {
+          show: showLabels,
+          formatter: formatters.label,
+          getLabel
+        }),
+        emphasis: {
+          focus: "series"
+        }
+      }));
       return mergeChartOption(
         {
           grid: {
@@ -606,7 +918,11 @@ var LineChart = React6.forwardRef(
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...gridInset(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...withZoomInset(
+              gridInset(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              dataZoom,
+              "x"
+            )
           },
           tooltip: buildTooltip(
             {
@@ -621,7 +937,7 @@ var LineChart = React6.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
@@ -630,6 +946,7 @@ var LineChart = React6.forwardRef(
             legendConfig,
             { show: showLegend, custom: customLegend }
           ),
+          dataZoom: buildDataZoom(dataZoom, "x", legendBottom ? 36 : 0),
           xAxis: buildAxis(
             {
               type: "category",
@@ -644,31 +961,19 @@ var LineChart = React6.forwardRef(
           yAxis: buildAxis(
             {
               type: "value",
+              ...isPercent && { max: 100 },
               splitLine: {
                 show: showGrid
               }
             },
-            yAxisConfig
+            formatters.axis(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: withReferenceMarks(series, referenceLines, referenceBands, {
+            valueAxis: "y",
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand
+          })
         },
         optionOverride
       );
@@ -682,62 +987,48 @@ var LineChart = React6.forwardRef(
       areaFilled,
       showDataPoints,
       stacked,
+      isPercent,
+      connectNulls,
       chartColors,
       showLabels,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      dataZoom,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
+      builtInLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick, onHover });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme: currentTheme === THEME_DARK2 ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            seriesIndex: params.seriesIndex,
-            seriesName: params.seriesName || "",
-            dataIndex: params.dataIndex || 0,
-            name: params.name || "",
-            value: params.value,
-            color: params.color
-          });
-        });
-        chart.on("mouseover", (params) => {
-          const { onHover: onHover2 } = latest.current;
-          if (!onHover2) return;
-          onHover2({
-            type: params.type || "mouseover",
-            componentType: params.componentType || "series",
-            seriesIndex: params.seriesIndex,
-            seriesName: params.seriesName || "",
-            dataIndex: params.dataIndex || 0,
-            name: params.name || "",
-            value: params.value,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? generateLineChartDescription(title, data) : void 0);
-    return /* @__PURE__ */ jsx6(
+    const format = resolveValueFormatter(valueFormat, locale);
+    const accessibilityDescription = description || (!isEmpty ? generateLineChartDescription(title, data, format) : void 0);
+    return /* @__PURE__ */ jsx7(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -745,8 +1036,13 @@ var LineChart = React6.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : categoryTable(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -763,27 +1059,39 @@ import {
   LegendComponent as LegendComponent2,
   TitleComponent as TitleComponent2
 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer2 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer3 } from "echarts/renderers";
 import {
   buildAxis as buildAxis2,
   buildDataLabel as buildDataLabel2,
+  buildDataZoom as buildDataZoom2,
   buildLegend as buildLegend2,
+  buildStackTotalSeries,
   buildTooltip as buildTooltip2,
+  categoryTable as categoryTable2,
+  chartFormatters as chartFormatters2,
+  formatValue,
   generateBarChartDescription,
   getChartColors as getChartColors2,
   gridInset as gridInset2,
   mergeChartOption as mergeChartOption2,
+  resolveChartHeight,
+  resolveValueFormatter as resolveValueFormatter2,
   seriesLabelLookup as seriesLabelLookup2,
-  withPointLabels as withPointLabels2
+  stackTotals,
+  toPercentStack as toPercentStack2,
+  withEndLabelInset,
+  withPointLabels as withPointLabels2,
+  withReferenceMarks as withReferenceMarks2,
+  withZoomInset as withZoomInset2
 } from "@classic-homes/charts-core";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 echarts4.use([
   EChartsBarChart,
   GridComponent2,
   TooltipComponent2,
   LegendComponent2,
   TitleComponent2,
-  CanvasRenderer2
+  CanvasRenderer3
 ]);
 var BarChart = React7.forwardRef(
   ({
@@ -791,6 +1099,9 @@ var BarChart = React7.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
+    rowHeight,
     loading,
     error,
     emptyMessage,
@@ -802,33 +1113,55 @@ var BarChart = React7.forwardRef(
     orientation = "vertical",
     stacked = false,
     showValues = false,
+    showTotal = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
+    dataZoom,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
     const isHorizontal = orientation === "horizontal";
+    const isPercent = stacked === "percent";
     const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors2(currentTheme);
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
-      palette: getChartColors2(currentTheme).series,
+      palette: chartColors.series,
       config: legendConfig,
       title,
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const builtInLegend = showLegend && !customLegend;
     const option = React7.useMemo(() => {
       if (isEmpty) return {};
+      const formatters = chartFormatters2({
+        valueFormat: isPercent ? "percentValue" : valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const plotted = isPercent ? toPercentStack2(data.series) : data.series;
       const categoryAxis = {
         type: "category",
         data: data.categories,
@@ -840,11 +1173,40 @@ var BarChart = React7.forwardRef(
       };
       const valueAxis = {
         type: "value",
+        ...isPercent && { max: 100 },
         splitLine: {
           show: showGrid
         }
       };
       const getLabel = seriesLabelLookup2(data.series);
+      const labelPosition = isHorizontal ? "right" : "top";
+      const zoomAxis = isHorizontal ? "y" : "x";
+      const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
+      const series = data.series.map((source, index) => ({
+        name: source.name,
+        type: "bar",
+        data: withPointLabels2(plotted[index].data, source.labels, formatters.label, {
+          position: labelPosition
+        }),
+        stack: stacked ? "Total" : void 0,
+        itemStyle: source.color ? { color: source.color } : void 0,
+        label: buildDataLabel2({ show: true, position: labelPosition }, void 0, {
+          show: showValues,
+          formatter: formatters.label,
+          getLabel
+        }),
+        emphasis: {
+          focus: "series"
+        }
+      }));
+      const format2 = resolveValueFormatter2(valueFormat, locale);
+      const stackedSeries = data.series.map((s) => ({ data: s.data }));
+      const totalSeries = showTotal ? buildStackTotalSeries(data.categories, stackedSeries, {
+        stacked,
+        position: labelPosition,
+        format: format2
+      }) : [];
+      const endLabels = !isHorizontal ? [] : totalSeries.length ? [...stackTotals(stackedSeries, stacked).values()].flat().map((t) => formatValue(t, format2)) : showValues ? plotted.flatMap((s) => s.data.map((value) => formatValue(value, formatters.format))) : [];
       return mergeChartOption2(
         {
           grid: {
@@ -852,7 +1214,14 @@ var BarChart = React7.forwardRef(
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...gridInset2(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...withZoomInset2(
+              withEndLabelInset(
+                gridInset2(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+                endLabels
+              ),
+              dataZoom,
+              zoomAxis
+            )
           },
           tooltip: buildTooltip2(
             {
@@ -864,7 +1233,7 @@ var BarChart = React7.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
@@ -873,28 +1242,22 @@ var BarChart = React7.forwardRef(
             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"
-            }
-          }))
+          dataZoom: buildDataZoom2(dataZoom, zoomAxis, legendBottom ? 36 : 0),
+          xAxis: buildAxis2(
+            isHorizontal ? valueAxis : categoryAxis,
+            isHorizontal ? formatters.axis(xAxisConfig) : xAxisConfig
+          ),
+          yAxis: buildAxis2(
+            isHorizontal ? categoryAxis : valueAxis,
+            isHorizontal ? yAxisConfig : formatters.axis(yAxisConfig)
+          ),
+          series: withReferenceMarks2([...series, ...totalSeries], referenceLines, referenceBands, {
+            valueAxis: isHorizontal ? "x" : "y",
+            inverse: isHorizontal,
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand
+          })
         },
         optionOverride
       );
@@ -905,48 +1268,55 @@ var BarChart = React7.forwardRef(
       showLegend,
       showGrid,
       isHorizontal,
+      isPercent,
       stacked,
       showValues,
+      showTotal,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      dataZoom,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
+      builtInLegend,
+      chartColors,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            seriesIndex: params.seriesIndex,
-            seriesName: params.seriesName || "",
-            dataIndex: params.dataIndex || 0,
-            name: params.name || "",
-            value: params.value,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? generateBarChartDescription(title, data) : void 0);
-    return /* @__PURE__ */ jsx7(
+    const format = resolveValueFormatter2(valueFormat, locale);
+    const accessibilityDescription = description || (!isEmpty ? generateBarChartDescription(title, data, format) : void 0);
+    const resolvedHeight = isHorizontal ? resolveChartHeight(height, data?.categories?.length ?? 0, {
+      rowHeight,
+      minHeight,
+      maxHeight,
+      chrome: 56 + (builtInLegend ? 36 : 0) + (dataZoom ? 36 : 0)
+    }) : height === "auto" ? 400 : height;
+    return /* @__PURE__ */ jsx8(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
-        height,
+        height: resolvedHeight,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -954,8 +1324,13 @@ var BarChart = React7.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : categoryTable2(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -967,7 +1342,7 @@ 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 { CanvasRenderer as CanvasRenderer4 } from "echarts/renderers";
 import {
   buildDataLabel as buildDataLabel3,
   buildLegend as buildLegend3,
@@ -979,16 +1354,20 @@ import {
   itemLabelLookup,
   legendCenter,
   mergeChartOption as mergeChartOption3,
-  pointLabel
+  pointLabel,
+  resolveValueFormatter as resolveValueFormatter3,
+  sliceTable
 } from "@classic-homes/charts-core";
-import { jsx as jsx8 } from "react/jsx-runtime";
-echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer3]);
+import { jsx as jsx9 } from "react/jsx-runtime";
+echarts5.use([EChartsPieChart, TooltipComponent3, LegendComponent3, TitleComponent3, CanvasRenderer4]);
 var PieChart = React8.forwardRef(
   ({
     title,
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -999,6 +1378,8 @@ var PieChart = React8.forwardRef(
     showLabels = true,
     labelPosition = "outside",
     innerRadius = 0,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -1006,6 +1387,11 @@ var PieChart = React8.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -1021,9 +1407,14 @@ var PieChart = React8.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React8.useMemo(
+      () => resolveValueFormatter3(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const tooltipValues = tooltipValueFormatter ?? format;
     const option = React8.useMemo(() => {
       if (isEmpty) return {};
-      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValues : void 0;
       const tooltipBase = {
         trigger: "item",
         formatter: valueFormatter ? (params) => {
@@ -1036,7 +1427,7 @@ var PieChart = React8.forwardRef(
           tooltip: buildTooltip3(tooltipBase, {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
+            valueFormatter: tooltipValues,
             getLabel: itemLabelLookup(data)
           }),
           legend: buildLegend3(
@@ -1088,40 +1479,32 @@ var PieChart = React8.forwardRef(
       title,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      tooltipValues,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            name: params.name || "",
-            value: params.value,
-            percent: params.percent,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toSliceParams(params, "click")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription(title, data, false) : void 0);
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1129,8 +1512,13 @@ var PieChart = React8.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : sliceTable(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx8("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1147,29 +1535,37 @@ import {
   LegendComponent as LegendComponent4,
   TitleComponent as TitleComponent4
 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer4 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer5 } from "echarts/renderers";
 import {
   buildAxis as buildAxis3,
   buildDataLabel as buildDataLabel4,
+  buildDataZoom as buildDataZoom3,
   buildLegend as buildLegend4,
   buildTooltip as buildTooltip4,
+  categoryTable as categoryTable3,
+  chartFormatters as chartFormatters3,
   colorWithAlpha,
+  generateAreaChartDescription,
   getChartColors as getChartColors4,
   hasPointLabels as hasPointLabels2,
   gridInset as gridInset3,
   mergeChartOption as mergeChartOption4,
+  resolveValueFormatter as resolveValueFormatter4,
   seriesLabelLookup as seriesLabelLookup3,
   THEME_DARK as THEME_DARK3,
-  withPointLabels as withPointLabels3
+  toPercentStack as toPercentStack3,
+  withPointLabels as withPointLabels3,
+  withReferenceMarks as withReferenceMarks3,
+  withZoomInset as withZoomInset3
 } from "@classic-homes/charts-core";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 echarts6.use([
   EChartsLineChart2,
   GridComponent3,
   TooltipComponent4,
   LegendComponent4,
   TitleComponent4,
-  CanvasRenderer4
+  CanvasRenderer5
 ]);
 var AreaChart = React9.forwardRef(
   ({
@@ -1177,6 +1573,8 @@ var AreaChart = React9.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1187,22 +1585,35 @@ var AreaChart = React9.forwardRef(
     showGrid = true,
     smooth = false,
     stacked = false,
+    connectNulls = false,
     gradient = true,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
+    dataZoom,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.categories?.length || !data?.series?.length || data.series.every((s) => !s.data?.length);
+    const isPercent = stacked === "percent";
     const currentTheme = useChartTheme(theme);
     const chartColors = getChartColors4(currentTheme);
     const legend = useChartLegend({
@@ -1214,10 +1625,49 @@ var AreaChart = React9.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const builtInLegend = showLegend && !customLegend;
     const option = React9.useMemo(() => {
       if (isEmpty) return {};
+      const formatters = chartFormatters3({
+        valueFormat: isPercent ? "percentValue" : valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
+      const plotted = isPercent ? toPercentStack3(data.series) : data.series;
       const getLabel = seriesLabelLookup3(data.series);
       const showSymbol = showLabels || hasPointLabels2(data.series);
+      const legendBottom = builtInLegend && (legendConfig?.position ?? "bottom") === "bottom";
+      const series = data.series.map((source, index) => {
+        const base = source.color || chartColors.series[index % chartColors.series.length];
+        return {
+          name: source.name,
+          type: "line",
+          data: withPointLabels3(plotted[index].data, source.labels, formatters.label, {
+            position: "top"
+          }),
+          smooth,
+          connectNulls,
+          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: source.color ? { color: source.color } : void 0,
+          label: buildDataLabel4({ show: true, position: "top" }, void 0, {
+            show: showLabels,
+            formatter: formatters.label,
+            getLabel
+          }),
+          emphasis: {
+            focus: "series"
+          },
+          showSymbol
+        };
+      });
       return mergeChartOption4(
         {
           grid: {
@@ -1225,7 +1675,11 @@ var AreaChart = React9.forwardRef(
             right: "4%",
             bottom: "3%",
             containLabel: true,
-            ...gridInset3(legendConfig, showLegend && !customLegend, xAxisConfig, yAxisConfig)
+            ...withZoomInset3(
+              gridInset3(legendConfig, builtInLegend, xAxisConfig, yAxisConfig),
+              dataZoom,
+              "x"
+            )
           },
           tooltip: buildTooltip4(
             {
@@ -1240,7 +1694,7 @@ var AreaChart = React9.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
@@ -1249,6 +1703,7 @@ var AreaChart = React9.forwardRef(
             legendConfig,
             { show: showLegend, custom: customLegend }
           ),
+          dataZoom: buildDataZoom3(dataZoom, "x", legendBottom ? 36 : 0),
           xAxis: buildAxis3(
             {
               type: "category",
@@ -1260,40 +1715,18 @@ var AreaChart = React9.forwardRef(
           yAxis: buildAxis3(
             {
               type: "value",
+              ...isPercent && { max: 100 },
               splitLine: {
                 show: showGrid
               }
             },
-            yAxisConfig
+            formatters.axis(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
-            };
+          series: withReferenceMarks3(series, referenceLines, referenceBands, {
+            valueAxis: "y",
+            format: formatters.format,
+            color: chartColors.reference,
+            bandColor: chartColors.referenceBand
           })
         },
         optionOverride
@@ -1306,49 +1739,49 @@ var AreaChart = React9.forwardRef(
       showGrid,
       smooth,
       stacked,
+      isPercent,
+      connectNulls,
       gradient,
       chartColors,
       showLabels,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      dataZoom,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
+      builtInLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = 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;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            seriesIndex: params.seriesIndex,
-            seriesName: params.seriesName || "",
-            dataIndex: params.dataIndex || 0,
-            name: params.name || "",
-            value: params.value,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
-    const accessibilityDescription = description || (!isEmpty ? `${title}. Area chart with ${data.categories.length} data points across ${data.series.length} series.` : void 0);
-    return /* @__PURE__ */ jsx9(
+    const format = resolveValueFormatter4(valueFormat, locale);
+    const accessibilityDescription = description || (!isEmpty ? generateAreaChartDescription(title, data, format) : void 0);
+    return /* @__PURE__ */ jsx10(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1356,8 +1789,13 @@ var AreaChart = React9.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : categoryTable3(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1374,22 +1812,26 @@ import {
   LegendComponent as LegendComponent5,
   TitleComponent as TitleComponent5
 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer5 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer6 } from "echarts/renderers";
 import {
   buildAxis as buildAxis4,
   buildDataLabel as buildDataLabel5,
   buildLegend as buildLegend5,
   buildTooltip as buildTooltip5,
+  chartFormatters as chartFormatters4,
   escapeHtml as escapeHtml2,
   formatTooltipValue as formatTooltipValue2,
   generateScatterChartDescription,
   getChartColors as getChartColors5,
   gridInset as gridInset4,
   mergeChartOption as mergeChartOption5,
+  resolveValueFormatter as resolveValueFormatter5,
+  scatterTable,
   seriesLabelLookup as seriesLabelLookup4,
-  withPointLabels as withPointLabels4
+  withPointLabels as withPointLabels4,
+  withReferenceMarks as withReferenceMarks4
 } from "@classic-homes/charts-core";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 echarts7.use([
   EChartsScatterChart,
   // Trend lines are line series
@@ -1398,7 +1840,7 @@ echarts7.use([
   TooltipComponent5,
   LegendComponent5,
   TitleComponent5,
-  CanvasRenderer5
+  CanvasRenderer6
 ]);
 var ScatterChart = React10.forwardRef(
   ({
@@ -1406,6 +1848,8 @@ var ScatterChart = React10.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1417,25 +1861,36 @@ var ScatterChart = React10.forwardRef(
     showTrendLine = false,
     symbolSize = 10,
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    referenceLines,
+    referenceBands,
     tooltipFormatter,
     tooltipValueFormatter,
     legend: legendConfig,
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
+    onHover,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.series?.length || data.series.every((s) => !s.data?.length);
     const currentTheme = useChartTheme(theme);
+    const chartColors = getChartColors5(currentTheme);
     const legend = useChartLegend({
       names: data?.series?.map((s) => s.name) ?? [],
       colors: data?.series?.map((s) => s.color) ?? [],
-      palette: getChartColors5(currentTheme).series,
+      palette: chartColors.series,
       config: legendConfig,
       title,
       onLegendChange
@@ -1443,16 +1898,22 @@ var ScatterChart = React10.forwardRef(
     const customLegend = renderLegend !== void 0;
     const option = React10.useMemo(() => {
       if (isEmpty) return {};
+      const formatters = chartFormatters4({
+        valueFormat,
+        locale,
+        tooltipValueFormatter,
+        labelFormatter
+      });
       const getLabel = seriesLabelLookup4(data.series);
       const series = data.series.map((s) => ({
         name: s.name,
         type: "scatter",
-        data: withPointLabels4(s.data, s.labels, labelFormatter, { position: "top" }),
+        data: withPointLabels4(s.data, s.labels, formatters.label, { 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,
+          formatter: formatters.label,
           getLabel
         }),
         emphasis: {
@@ -1517,15 +1978,15 @@ var ScatterChart = React10.forwardRef(
               formatter: (params) => {
                 const p = params;
                 if (!p.value) return "";
-                const x = formatTooltipValue2(p.value[0], tooltipValueFormatter);
-                const y = formatTooltipValue2(p.value[1], tooltipValueFormatter);
+                const x = formatTooltipValue2(p.value[0], formatters.tooltip);
+                const y = formatTooltipValue2(p.value[1], formatters.tooltip);
                 return `${escapeHtml2(p.seriesName)}<br/>X: ${escapeHtml2(x)}<br/>Y: ${escapeHtml2(y)}`;
               }
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter,
+              valueFormatter: formatters.tooltip,
               getLabel
             }
           ),
@@ -1550,9 +2011,19 @@ var ScatterChart = React10.forwardRef(
                 show: showGrid
               }
             },
-            yAxisConfig
+            formatters.axis(yAxisConfig)
           ),
-          series
+          series: withReferenceMarks4(
+            series,
+            referenceLines,
+            referenceBands,
+            {
+              valueAxis: "y",
+              format: formatters.format,
+              color: chartColors.reference,
+              bandColor: chartColors.referenceBand
+            }
+          )
         },
         optionOverride
       );
@@ -1565,46 +2036,42 @@ var ScatterChart = React10.forwardRef(
       showTrendLine,
       symbolSize,
       showLabels,
+      valueFormat,
+      locale,
       labelFormatter,
       xAxisConfig,
       yAxisConfig,
+      referenceLines,
+      referenceBands,
+      chartColors,
       tooltipFormatter,
       tooltipValueFormatter,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            seriesIndex: params.seriesIndex,
-            seriesName: params.seriesName || "",
-            dataIndex: params.dataIndex || 0,
-            name: params.name || "",
-            value: params.value,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toDataPointParams(params, "click"))),
+        mouseover: onHover && ((params) => onHover(toDataPointParams(params, "mouseover")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? generateScatterChartDescription(title, data) : void 0);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1612,8 +2079,13 @@ var ScatterChart = React10.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : scatterTable(data, xAxisConfig?.name, yAxisConfig?.name),
+        showDataTable,
+        format: resolveValueFormatter5(valueFormat, locale),
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx10("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1625,7 +2097,7 @@ 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 { CanvasRenderer as CanvasRenderer7 } from "echarts/renderers";
 import {
   buildDataLabel as buildDataLabel6,
   buildLegend as buildLegend6,
@@ -1639,16 +2111,20 @@ import {
   legendCenter as legendCenter2,
   mergeChartOption as mergeChartOption6,
   pointLabel as pointLabel2,
+  resolveValueFormatter as resolveValueFormatter6,
+  sliceTable as sliceTable2,
   THEME_DARK as THEME_DARK4
 } from "@classic-homes/charts-core";
-import { jsx as jsx11 } from "react/jsx-runtime";
-echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer6]);
+import { jsx as jsx12 } from "react/jsx-runtime";
+echarts8.use([EChartsPieChart2, TooltipComponent6, LegendComponent6, TitleComponent6, CanvasRenderer7]);
 var DonutChart = React11.forwardRef(
   ({
     title,
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1661,6 +2137,8 @@ var DonutChart = React11.forwardRef(
     innerRadius = "50%",
     centerLabel,
     centerValue,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -1668,6 +2146,11 @@ var DonutChart = React11.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -1684,6 +2167,11 @@ var DonutChart = React11.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React11.useMemo(
+      () => resolveValueFormatter6(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const tooltipValues = tooltipValueFormatter ?? format;
     const option = React11.useMemo(() => {
       if (isEmpty) return {};
       const pieCenter = legendCenter2(legendConfig, showLegend && !customLegend, ["50%", "45%"]);
@@ -1730,7 +2218,7 @@ var DonutChart = React11.forwardRef(
           )
         );
       }
-      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const valueFormatter = tooltipFormatter === void 0 ? tooltipValues : void 0;
       const tooltipBase = {
         trigger: "item",
         formatter: valueFormatter ? (params) => {
@@ -1743,7 +2231,7 @@ var DonutChart = React11.forwardRef(
           tooltip: buildTooltip6(tooltipBase, {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
+            valueFormatter: tooltipValues,
             getLabel: itemLabelLookup2(data)
           }),
           legend: buildLegend6(
@@ -1803,40 +2291,32 @@ var DonutChart = React11.forwardRef(
       chartColors,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      tooltipValues,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme: currentTheme === THEME_DARK4 ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
-            type: params.type || "click",
-            componentType: params.componentType || "series",
-            name: params.name || "",
-            value: params.value,
-            percent: params.percent,
-            color: params.color
-          });
-        });
-      }
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => onClick(toSliceParams(params, "click")))
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? generatePieChartDescription2(title, data, true) : void 0);
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -1844,8 +2324,13 @@ var DonutChart = React11.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : sliceTable2(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx11("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -1862,23 +2347,25 @@ import {
   TitleComponent as TitleComponent7,
   RadarComponent
 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer7 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer8 } from "echarts/renderers";
 import {
   buildDataLabel as buildDataLabel7,
   buildLegend as buildLegend7,
   buildTooltip as buildTooltip7,
   getChartColors as getChartColors7,
   legendCenter as legendCenter3,
-  mergeChartOption as mergeChartOption7
+  mergeChartOption as mergeChartOption7,
+  radarTable,
+  resolveValueFormatter as resolveValueFormatter7
 } from "@classic-homes/charts-core";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 echarts9.use([
   EChartsRadarChart,
   TooltipComponent7,
   LegendComponent7,
   TitleComponent7,
   RadarComponent,
-  CanvasRenderer7
+  CanvasRenderer8
 ]);
 var RadarChart = React12.forwardRef(
   ({
@@ -1887,6 +2374,8 @@ var RadarChart = React12.forwardRef(
     data,
     indicators,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -1896,6 +2385,8 @@ var RadarChart = React12.forwardRef(
     showTooltip = true,
     shape = "polygon",
     showLabels = false,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -1903,6 +2394,11 @@ var RadarChart = React12.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -1918,6 +2414,11 @@ var RadarChart = React12.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React12.useMemo(
+      () => resolveValueFormatter7(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React12.useMemo(() => {
       if (isEmpty) return {};
       return mergeChartOption7(
@@ -1929,7 +2430,7 @@ var RadarChart = React12.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           legend: buildLegend7(
@@ -1976,22 +2477,20 @@ var RadarChart = React12.forwardRef(
       showLabels,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             seriesIndex: params.seriesIndex,
@@ -2001,17 +2500,21 @@ var RadarChart = React12.forwardRef(
             value: params.value,
             color: params.color
           });
-        });
-      }
+        })
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Radar chart with ${indicators.length} dimensions comparing ${data.series.length} series.` : void 0);
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx13(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -2019,8 +2522,13 @@ var RadarChart = React12.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : radarTable(data, indicators),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx12("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2032,7 +2540,7 @@ 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 { CanvasRenderer as CanvasRenderer9 } from "echarts/renderers";
 import {
   buildDataLabel as buildDataLabel8,
   buildLegend as buildLegend8,
@@ -2042,15 +2550,17 @@ import {
   getChartColors as getChartColors8,
   itemLabelLookup as itemLabelLookup3,
   mergeChartOption as mergeChartOption8,
-  pointLabel as pointLabel3
+  pointLabel as pointLabel3,
+  resolveValueFormatter as resolveValueFormatter8,
+  sliceTable as sliceTable3
 } from "@classic-homes/charts-core";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 echarts10.use([
   EChartsFunnelChart,
   TooltipComponent8,
   LegendComponent8,
   TitleComponent8,
-  CanvasRenderer8
+  CanvasRenderer9
 ]);
 var FunnelChart = React13.forwardRef(
   ({
@@ -2058,6 +2568,8 @@ var FunnelChart = React13.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2068,6 +2580,8 @@ var FunnelChart = React13.forwardRef(
     sort = "descending",
     orientation = "vertical",
     showLabels = true,
+    valueFormat,
+    locale,
     labelFormatter,
     tooltipFormatter,
     tooltipValueFormatter,
@@ -2075,6 +2589,11 @@ var FunnelChart = React13.forwardRef(
     renderLegend,
     onLegendChange,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2090,15 +2609,20 @@ var FunnelChart = React13.forwardRef(
       onLegendChange
     });
     const customLegend = renderLegend !== void 0;
+    const format = React13.useMemo(
+      () => resolveValueFormatter8(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React13.useMemo(() => {
       if (isEmpty) return {};
       const getLabel = itemLabelLookup3(data);
-      const valueFormatter = tooltipFormatter === void 0 ? tooltipValueFormatter : void 0;
+      const templateFormatter = tooltipFormatter === void 0 ? valueFormatter : void 0;
       const tooltipBase = {
         trigger: "item",
-        formatter: valueFormatter ? (params) => {
+        formatter: templateFormatter ? (params) => {
           const p = params;
-          return `${escapeHtml4(p.seriesName)} <br/>${escapeHtml4(p.name)}: ${escapeHtml4(formatTooltipValue4(p.value, valueFormatter))}`;
+          return `${escapeHtml4(p.seriesName)} <br/>${escapeHtml4(p.name)}: ${escapeHtml4(formatTooltipValue4(p.value, templateFormatter))}`;
         } : "{a} <br/>{b}: {c}"
       };
       return mergeChartOption8(
@@ -2106,7 +2630,7 @@ var FunnelChart = React13.forwardRef(
           tooltip: buildTooltip8(tooltipBase, {
             show: showTooltip,
             formatter: tooltipFormatter,
-            valueFormatter: tooltipValueFormatter,
+            valueFormatter,
             getLabel
           }),
           legend: buildLegend8(
@@ -2169,39 +2693,41 @@ var FunnelChart = React13.forwardRef(
       title,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       legendConfig,
       customLegend,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        legend.attach(chart);
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             name: params.name || "",
             value: params.value,
             color: params.color
           });
-        });
-      }
+        })
+      }),
+      onReady: legend.attach,
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Funnel chart with ${data.length} stages.` : void 0);
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
@@ -2209,8 +2735,13 @@ var FunnelChart = React13.forwardRef(
         className: cn(className),
         legend: !isEmpty && renderLegend ? renderLegend(legend.renderProps) : void 0,
         legendPosition: legendConfig?.position,
+        dataTable: isEmpty ? void 0 : sliceTable3(data, "Stage"),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx13("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2222,15 +2753,16 @@ import * as React14 from "react";
 import * as echarts11 from "echarts/core";
 import { GaugeChart as EChartsGaugeChart } from "echarts/charts";
 import { TitleComponent as TitleComponent9, TooltipComponent as TooltipComponent9 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer9 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer10 } from "echarts/renderers";
 import {
   buildTooltip as buildTooltip9,
   getChartColors as getChartColors9,
   mergeChartOption as mergeChartOption9,
+  resolveValueFormatter as resolveValueFormatter9,
   THEME_DARK as THEME_DARK5
 } from "@classic-homes/charts-core";
-import { jsx as jsx14 } from "react/jsx-runtime";
-echarts11.use([EChartsGaugeChart, TitleComponent9, TooltipComponent9, CanvasRenderer9]);
+import { jsx as jsx15 } from "react/jsx-runtime";
+echarts11.use([EChartsGaugeChart, TitleComponent9, TooltipComponent9, CanvasRenderer10]);
 var GaugeChart = React14.forwardRef(
   ({
     title,
@@ -2239,6 +2771,8 @@ var GaugeChart = React14.forwardRef(
     min = 0,
     max = 100,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2246,11 +2780,18 @@ var GaugeChart = React14.forwardRef(
     animation = true,
     splitNumber = 10,
     showProgress = true,
-    formatValue,
+    formatValue: formatValue2,
     showTooltip = true,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2258,6 +2799,11 @@ var GaugeChart = React14.forwardRef(
     const currentTheme = useChartTheme(theme);
     const chartColors = getChartColors9(currentTheme);
     const reducedMotion = useReducedMotion();
+    const format = React14.useMemo(
+      () => resolveValueFormatter9(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = formatValue2 ?? format;
     const option = React14.useMemo(() => {
       return mergeChartOption9(
         {
@@ -2329,7 +2875,7 @@ var GaugeChart = React14.forwardRef(
                 fontSize: 28,
                 fontWeight: "bold",
                 offsetCenter: [0, "40%"],
-                formatter: formatValue || "{value}"
+                formatter: valueFormatter || "{value}"
               },
               data: [
                 {
@@ -2348,7 +2894,7 @@ var GaugeChart = React14.forwardRef(
       max,
       splitNumber,
       showProgress,
-      formatValue,
+      valueFormatter,
       title,
       animation,
       reducedMotion,
@@ -2358,16 +2904,15 @@ var GaugeChart = React14.forwardRef(
       tooltipValueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme: currentTheme === THEME_DARK5 ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
-          onClick2({
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             seriesIndex: params.seriesIndex,
@@ -2377,23 +2922,35 @@ var GaugeChart = React14.forwardRef(
             value: params.value,
             color: params.color
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
-    const accessibilityDescription = description || `${title}. Gauge showing value ${value} on scale from ${min} to ${max}.`;
-    return /* @__PURE__ */ jsx14(
+    const show = (n) => valueFormatter ? valueFormatter(n) : String(n);
+    const accessibilityDescription = description || `${title}. Gauge showing value ${show(value)} on scale from ${show(min)} to ${show(max)}.`;
+    return /* @__PURE__ */ jsx15(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         emptyMessage,
         className: cn(className),
+        dataTable: {
+          headers: ["Metric", "Value", "Minimum", "Maximum"],
+          rows: [[title, value, min, max]]
+        },
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx14("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2410,23 +2967,25 @@ import {
   TitleComponent as TitleComponent10,
   VisualMapComponent
 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer10 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer11 } from "echarts/renderers";
 import {
   buildAxis as buildAxis5,
   buildDataLabel as buildDataLabel9,
   buildTooltip as buildTooltip10,
   escapeHtml as escapeHtml5,
   formatTooltipValue as formatTooltipValue5,
-  mergeChartOption as mergeChartOption10
+  mergeChartOption as mergeChartOption10,
+  resolveValueFormatter as resolveValueFormatter10,
+  heatmapTable
 } from "@classic-homes/charts-core";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 echarts12.use([
   EChartsHeatmapChart,
   GridComponent5,
   TooltipComponent10,
   TitleComponent10,
   VisualMapComponent,
-  CanvasRenderer10
+  CanvasRenderer11
 ]);
 var HeatmapChart = React15.forwardRef(
   ({
@@ -2436,6 +2995,8 @@ var HeatmapChart = React15.forwardRef(
     xAxis,
     yAxis,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2446,9 +3007,16 @@ var HeatmapChart = React15.forwardRef(
     labelFormatter,
     xAxisConfig,
     yAxisConfig,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2462,6 +3030,11 @@ var HeatmapChart = React15.forwardRef(
     }
     const minValue = data?.min ?? dataMin;
     const maxValue = data?.max ?? dataMax;
+    const format = React15.useMemo(
+      () => resolveValueFormatter10(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React15.useMemo(() => {
       if (isEmpty) return {};
       return mergeChartOption10(
@@ -2473,13 +3046,13 @@ var HeatmapChart = React15.forwardRef(
                 const p = params;
                 if (!p.value) return "";
                 const [xIdx, yIdx, value] = p.value;
-                return `${escapeHtml5(xAxis[xIdx])} / ${escapeHtml5(yAxis[yIdx])}: ${escapeHtml5(formatTooltipValue5(value, tooltipValueFormatter))}`;
+                return `${escapeHtml5(xAxis[xIdx])} / ${escapeHtml5(yAxis[yIdx])}: ${escapeHtml5(formatTooltipValue5(value, valueFormatter))}`;
               }
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           grid: {
@@ -2514,7 +3087,8 @@ var HeatmapChart = React15.forwardRef(
             calculable: true,
             orient: "vertical",
             right: "0%",
-            top: "center"
+            top: "center",
+            formatter: valueFormatter ? (value) => valueFormatter(value) : void 0
           },
           series: [
             {
@@ -2550,46 +3124,53 @@ var HeatmapChart = React15.forwardRef(
       xAxisConfig,
       yAxisConfig,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick, xAxis, yAxis });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2, xAxis: xAxis2, yAxis: yAxis2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const [xIdx, yIdx, value] = params.value || [0, 0, 0];
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             xIndex: xIdx,
             yIndex: yIdx,
-            xLabel: xAxis2[xIdx],
-            yLabel: yAxis2[yIdx],
+            xLabel: xAxis[xIdx],
+            yLabel: yAxis[yIdx],
             value
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Heatmap with ${xAxis.length} columns and ${yAxis.length} rows.` : void 0);
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : heatmapTable(data, xAxis, yAxis),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx15("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2601,7 +3182,7 @@ import * as React16 from "react";
 import * as echarts13 from "echarts/core";
 import { TreemapChart as EChartsTreemapChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent11, TitleComponent as TitleComponent11 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer11 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer12 } from "echarts/renderers";
 import {
   buildDataLabel as buildDataLabel10,
   buildTooltip as buildTooltip11,
@@ -2609,12 +3190,14 @@ import {
   formatTooltipValue as formatTooltipValue6,
   getChartColors as getChartColors10,
   mergeChartOption as mergeChartOption11,
+  resolveValueFormatter as resolveValueFormatter11,
+  treemapTable,
   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]);
+import { jsx as jsx17 } from "react/jsx-runtime";
+echarts13.use([EChartsTreemapChart, TooltipComponent11, TitleComponent11, CanvasRenderer12]);
 var TreemapChart = React16.forwardRef(
   ({
     title,
@@ -2622,6 +3205,8 @@ var TreemapChart = React16.forwardRef(
     data,
     levels,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2629,9 +3214,16 @@ var TreemapChart = React16.forwardRef(
     animation = true,
     showTooltip = true,
     labelFormatter,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2639,6 +3231,11 @@ var TreemapChart = React16.forwardRef(
     const isEmpty = !data?.length;
     const currentTheme = useChartTheme(theme);
     const chartColors = getChartColors10(currentTheme);
+    const format = React16.useMemo(
+      () => resolveValueFormatter11(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React16.useMemo(() => {
       if (isEmpty) return {};
       const toNode = (node) => ({
@@ -2652,13 +3249,13 @@ var TreemapChart = React16.forwardRef(
             {
               formatter: (params) => {
                 const p = params;
-                return `${escapeHtml6(p.name)}: ${escapeHtml6(formatTooltipValue6(p.value, tooltipValueFormatter))}`;
+                return `${escapeHtml6(p.name)}: ${escapeHtml6(formatTooltipValue6(p.value, valueFormatter))}`;
               }
             },
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           series: [
@@ -2718,20 +3315,19 @@ var TreemapChart = React16.forwardRef(
       chartColors,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme: currentTheme === THEME_DARK6 ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const treePathInfo = params.treePathInfo || [];
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             name: params.name || "",
@@ -2739,24 +3335,32 @@ var TreemapChart = React16.forwardRef(
             path: treePathInfo.map((item) => item.name || ""),
             depth: treePathInfo.length - 1
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Treemap chart showing hierarchical data.` : void 0);
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : treemapTable(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx16("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -2776,15 +3380,17 @@ import {
   TitleComponent as TitleComponent12,
   DataZoomComponent
 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer12 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer13 } from "echarts/renderers";
 import {
   buildAxis as buildAxis6,
   buildTooltip as buildTooltip12,
   getChartColors as getChartColors11,
   mergeChartOption as mergeChartOption12,
+  resolveValueFormatter as resolveValueFormatter12,
+  candlestickTable,
   THEME_DARK as THEME_DARK7
 } from "@classic-homes/charts-core";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 echarts14.use([
   EChartsCandlestickChart,
   EChartsBarChart2,
@@ -2792,7 +3398,7 @@ echarts14.use([
   TooltipComponent12,
   TitleComponent12,
   DataZoomComponent,
-  CanvasRenderer12
+  CanvasRenderer13
 ]);
 var CandlestickChart = React17.forwardRef(
   ({
@@ -2800,6 +3406,8 @@ var CandlestickChart = React17.forwardRef(
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -2807,11 +3415,19 @@ var CandlestickChart = React17.forwardRef(
     animation = true,
     showTooltip = true,
     showVolume = false,
+    zoomStart = 80,
     xAxisConfig,
     yAxisConfig,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
@@ -2819,6 +3435,11 @@ var CandlestickChart = React17.forwardRef(
     const isEmpty = !data?.dates?.length || !data?.data?.length;
     const currentTheme = useChartTheme(theme);
     const chartColors = getChartColors11(currentTheme);
+    const format = React17.useMemo(
+      () => resolveValueFormatter12(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React17.useMemo(() => {
       if (isEmpty) return {};
       const candlestickData = data.data.map((item) => [item.open, item.close, item.low, item.high]);
@@ -2921,7 +3542,7 @@ var CandlestickChart = React17.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           grid: gridArr,
@@ -2930,14 +3551,14 @@ var CandlestickChart = React17.forwardRef(
           dataZoom: [
             {
               type: "inside",
-              start: 80,
+              start: zoomStart,
               end: 100
             },
             {
               show: true,
               type: "slider",
               top: "90%",
-              start: 80,
+              start: zoomStart,
               end: 100
             }
           ],
@@ -2950,54 +3571,62 @@ var CandlestickChart = React17.forwardRef(
       isEmpty,
       showTooltip,
       showVolume,
+      zoomStart,
       title,
       chartColors,
       xAxisConfig,
       yAxisConfig,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick, data });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme: currentTheme === THEME_DARK7 ? "dark" : "light",
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2, data: data2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const dataIndex = params.dataIndex || 0;
-          const item = data2.data[dataIndex];
+          const item = data.data[dataIndex];
           if (!item) return;
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
-            date: data2.dates[dataIndex],
+            date: data.dates[dataIndex],
             open: item.open,
             close: item.close,
             high: item.high,
             low: item.low,
-            volume: data2.volume?.[dataIndex]
+            volume: data.volume?.[dataIndex]
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Candlestick chart with ${data.dates.length} data points.` : void 0);
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : candlestickTable(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx17("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx18("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -3009,22 +3638,26 @@ import * as React18 from "react";
 import * as echarts15 from "echarts/core";
 import { SankeyChart as EChartsSankeyChart } from "echarts/charts";
 import { TooltipComponent as TooltipComponent13, TitleComponent as TitleComponent13 } from "echarts/components";
-import { CanvasRenderer as CanvasRenderer13 } from "echarts/renderers";
+import { CanvasRenderer as CanvasRenderer14 } from "echarts/renderers";
 import {
   buildDataLabel as buildDataLabel11,
   buildTooltip as buildTooltip13,
   mergeChartOption as mergeChartOption13,
+  resolveValueFormatter as resolveValueFormatter13,
+  sankeyTable,
   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]);
+import { jsx as jsx19 } from "react/jsx-runtime";
+echarts15.use([EChartsSankeyChart, TooltipComponent13, TitleComponent13, CanvasRenderer14]);
 var SankeyChart = React18.forwardRef(
   ({
     title,
     description,
     data,
     height = 400,
+    minHeight,
+    maxHeight,
     loading,
     error,
     emptyMessage,
@@ -3033,14 +3666,26 @@ var SankeyChart = React18.forwardRef(
     showTooltip = true,
     orient = "horizontal",
     labelFormatter,
+    valueFormat,
+    locale,
     tooltipFormatter,
     tooltipValueFormatter,
     option: optionOverride,
+    onReady,
+    events,
+    showDataTable,
+    exportable,
+    patterns,
     onClick,
     class: className,
     ...props
   }, ref) => {
     const isEmpty = !data?.nodes?.length || !data?.links?.length;
+    const format = React18.useMemo(
+      () => resolveValueFormatter13(valueFormat, locale),
+      [valueFormat, locale]
+    );
+    const valueFormatter = tooltipValueFormatter ?? format;
     const option = React18.useMemo(() => {
       if (isEmpty) return {};
       return mergeChartOption13(
@@ -3053,7 +3698,7 @@ var SankeyChart = React18.forwardRef(
             {
               show: showTooltip,
               formatter: tooltipFormatter,
-              valueFormatter: tooltipValueFormatter
+              valueFormatter
             }
           ),
           series: [
@@ -3096,20 +3741,19 @@ var SankeyChart = React18.forwardRef(
       orient,
       labelFormatter,
       tooltipFormatter,
-      tooltipValueFormatter,
+      valueFormatter,
       optionOverride
     ]);
-    const latest = useLatestRef({ onClick });
-    const { containerRef } = useChart({
+    const { containerRef, exportImage } = useChart({
       option,
       theme,
       animation,
-      onReady: (chart) => {
-        chart.on("click", (params) => {
-          const { onClick: onClick2 } = latest.current;
-          if (!onClick2) return;
+      patterns,
+      events: chartEvents(events, {
+        click: onClick && ((params) => {
+          if (!onClick) return;
           const isEdge = params.dataType === "edge";
-          onClick2({
+          onClick({
             type: params.type || "click",
             componentType: params.componentType || "series",
             dataType: isEdge ? "edge" : "node",
@@ -3118,24 +3762,32 @@ var SankeyChart = React18.forwardRef(
             source: isEdge ? params.data?.source : void 0,
             target: isEdge ? params.data?.target : void 0
           });
-        });
-      }
+        })
+      }),
+      onCreated: onReady
     });
     const accessibilityDescription = description || (!isEmpty ? `${title}. Sankey diagram with ${data.nodes.length} nodes and ${data.links.length} links.` : void 0);
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       ChartContainer,
       {
         ref,
         title,
         description: accessibilityDescription,
         height,
+        minHeight,
+        maxHeight,
         loading,
         error,
         empty: isEmpty,
         emptyMessage,
         className: cn(className),
+        dataTable: isEmpty ? void 0 : sankeyTable(data),
+        showDataTable,
+        format,
+        exportable,
+        exportImage,
         ...props,
-        children: /* @__PURE__ */ jsx18("div", { ref: containerRef, className: "h-full w-full" })
+        children: /* @__PURE__ */ jsx19("div", { ref: containerRef, className: "h-full w-full" })
       }
     );
   }
@@ -3146,6 +3798,7 @@ export {
   BarChart,
   CandlestickChart,
   ChartContainer,
+  ChartDataTable,
   ChartEmpty,
   ChartError,
   ChartLegend,
@@ -3161,7 +3814,9 @@ export {
   ScatterChart,
   TreemapChart,
   cn,
+  exportChartImage,
   registerClassicThemes,
+  registerEchartsModules,
   useChart,
   useChartLegend,
   useChartResize,