@primeui/vue-chart 0.0.1-alpha.1

package/dist/chunk-372K2BMN.mjs

@@ -0,0 +1,1476 @@
+import { LegendRenderer_default } from './chunk-5FTUGKPC.mjs';
+import { ColorLegendRenderer_default } from './chunk-E4ROAOPT.mjs';
+import { TooltipRenderer_default } from './chunk-GX2MK6VT.mjs';
+import { useResponsiveDimensions, useAnimationProps, useDrilldownState, useResponsiveConfig, provideFamilyRenderers, provideChartLayers, useZoomPan, useKeyboardNavigation, useChartSync, useChartContext, useChartSyncCoordinator } from './chunk-CQHNYT2V.mjs';
+import { NavigatorRenderer_default } from './chunk-NLXOJSKK.mjs';
+import { provideChartContext } from './chunk-HANSF33Z.mjs';
+import { CHART_SYNC_INFO_KEY } from './chunk-LD57I4SY.mjs';
+import { TOOLTIP_CONTEXT_KEY } from './chunk-FZ3PZ66C.mjs';
+import { defineComponent, computed, ref, onMounted, watch, onBeforeUnmount, toRef, shallowRef, provide, nextTick, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, renderSlot, unref, createBlock, resolveDynamicComponent, withCtx, createTextVNode, Fragment, renderList, withModifiers } from 'vue';
+import { resolveTheme, ChartStateController, buildChartDataTable, themeToCssVars, configureCanvasHiDPI, computeCrosshairLayout, buildAnnotationContext, DEFAULT_FONT_FAMILY, renderAnnotationsCanvas, resolveDirFromElement, observeDocumentDir } from '@primeui/chart-core';
+import { verifyLicense } from '@primeui/license-manager';
+
+// src/release-date.ts
+var RELEASE_DATE = "2026-06-20";
+
+// src/Chart.vue
+var _hoisted_1 = {
+  key: 0,
+  role: "alert",
+  class: "p-chart-license-banner",
+  style: {
+    "position": "absolute",
+    "top": "8px",
+    "left": "8px",
+    "right": "8px",
+    "z-index": "10",
+    "pointer-events": "none",
+    "display": "flex",
+    "align-items": "center",
+    "gap": "8px",
+    "padding": "10px 14px",
+    "background": "#fef2f2",
+    "border": "1px solid #fecaca",
+    "color": "#991b1b",
+    "border-radius": "6px",
+    "font-size": "13px"
+  }
+};
+var _hoisted_2 = [
+  "role",
+  "aria-label",
+  "aria-roledescription",
+  "tabindex"
+];
+var _hoisted_3 = {
+  key: 0,
+  class: "chart-sr-only",
+  style: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0
+  }
+};
+var _hoisted_4 = { key: 0 };
+var _hoisted_5 = { key: 1 };
+var _hoisted_6 = { key: 0 };
+var _hoisted_7 = ["colspan"];
+var _hoisted_8 = [
+  "width",
+  "height",
+  "role",
+  "aria-label"
+];
+var _hoisted_9 = { key: 5 };
+var _hoisted_10 = ["id"];
+var _hoisted_11 = [
+  "x",
+  "y",
+  "width",
+  "height"
+];
+var _hoisted_12 = ["fill", "clip-path"];
+var _hoisted_13 = {
+  key: 4,
+  style: { "position": "relative" }
+};
+var _hoisted_14 = [
+  "aria-label",
+  "width",
+  "height"
+];
+var _hoisted_15 = ["width", "height"];
+var _hoisted_16 = ["width", "height"];
+var _hoisted_17 = ["width", "height"];
+var _hoisted_18 = ["width", "height"];
+var _hoisted_19 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke",
+  "stroke-width",
+  "stroke-dasharray"
+];
+var _hoisted_20 = [
+  "x1",
+  "y1",
+  "x2",
+  "y2",
+  "stroke",
+  "stroke-width",
+  "stroke-dasharray"
+];
+var _hoisted_21 = { key: 2 };
+var _hoisted_22 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "rx"
+];
+var _hoisted_23 = [
+  "x",
+  "y",
+  "font-size"
+];
+var _hoisted_24 = { key: 3 };
+var _hoisted_25 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "rx"
+];
+var _hoisted_26 = [
+  "x",
+  "y",
+  "font-size"
+];
+var _hoisted_27 = { key: 4 };
+var _hoisted_28 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "rx",
+  "fill"
+];
+var _hoisted_29 = [
+  "x",
+  "y",
+  "font-size"
+];
+var _hoisted_30 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "rx",
+  "fill"
+];
+var _hoisted_31 = [
+  "x",
+  "y",
+  "font-size"
+];
+var _hoisted_32 = ["width", "height"];
+var _hoisted_33 = [
+  "x",
+  "y",
+  "width",
+  "height"
+];
+var _hoisted_34 = {
+  key: 0,
+  style: {
+    margin: "0 2px",
+    opacity: 0.5
+  }
+};
+var _hoisted_35 = ["onClick"];
+var _hoisted_36 = ["width", "height"];
+var _hoisted_37 = [
+  "x",
+  "y",
+  "width",
+  "height",
+  "rx",
+  "stroke",
+  "stroke-width",
+  "stroke-dasharray"
+];
+var _hoisted_38 = {
+  key: 17,
+  "aria-live": "polite",
+  "aria-atomic": "true",
+  style: {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0
+  }
+};
+var _idCounter = 0;
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Chart",
+  props: {
+    devicePixelRatio: {},
+    width: {},
+    height: {},
+    class: {},
+    style: {},
+    theme: {},
+    plugins: {},
+    responsive: {
+      type: Boolean,
+      default: true
+    },
+    aspectRatio: {},
+    debounceDelay: {},
+    sync: { type: [Boolean, Object] },
+    dir: { default: "auto" },
+    fontFamily: {},
+    fontSize: {},
+    locale: {},
+    animation: { type: [Object, Boolean] },
+    animations: {},
+    transitions: {},
+    renderer: {}
+  },
+  emits: ["resize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const VNodeRenderer = defineComponent({
+      props: { node: {
+        type: Object,
+        required: true
+      } },
+      render() {
+        return this.node;
+      }
+    });
+    const props = __props;
+    const emit = __emit;
+    const hasExplicitDimensions = computed(() => props.width !== void 0 && props.height !== void 0);
+    const isFixed = computed(() => props.responsive === false && hasExplicitDimensions.value);
+    const { containerRef: sizeContainerRef, width, height } = useResponsiveDimensions({
+      width: computed(() => props.width),
+      height: computed(() => props.height),
+      responsive: computed(() => !isFixed.value),
+      debounceWithRAF: true,
+      debounceDelay: computed(() => props.debounceDelay),
+      aspectRatio: computed(() => props.aspectRatio),
+      maxDimensions: computed(() => hasExplicitDimensions.value && !isFixed.value),
+      onResize: (w, h) => emit("resize", w, h)
+    });
+    const autoDir = ref("ltr");
+    let stopDirObserver = null;
+    const detectDir = () => {
+      autoDir.value = resolveDirFromElement(sizeContainerRef.value);
+    };
+    const startObservingDir = () => {
+      if (stopDirObserver) return;
+      stopDirObserver = observeDocumentDir(detectDir);
+    };
+    const stopObservingDir = () => {
+      stopDirObserver?.();
+      stopDirObserver = null;
+    };
+    onMounted(() => {
+      if (props.dir === "auto") {
+        detectDir();
+        startObservingDir();
+      }
+    });
+    watch(() => props.dir, (newDir) => {
+      if (newDir === "auto") {
+        detectDir();
+        startObservingDir();
+      } else {
+        stopObservingDir();
+      }
+    });
+    onBeforeUnmount(() => {
+      stopObservingDir();
+    });
+    const resolvedDir = computed(() => props.dir === "auto" ? autoDir.value : props.dir ?? "ltr");
+    const chartId = `chart-${++_idCounter}`;
+    const licenseResult = ref(null);
+    const licenseValid = computed(() => !!licenseResult.value?.valid);
+    const licenseMessage = computed(() => licenseResult.value?.message ?? null);
+    async function runLicenseCheck() {
+      const result = await verifyLicense("charts", { releaseDate: RELEASE_DATE });
+      licenseResult.value = result;
+      if (!result.valid) {
+        console.warn(`[PrimeUI Chart] ${result.message}`);
+      }
+    }
+    onMounted(() => {
+      runLicenseCheck();
+    });
+    const resolvedTheme = computed(() => resolveTheme(props.theme));
+    const { coreChart, emitHandlerRef, methods, state, hover: hoverCtx, rendererHint, redraw } = provideChartContext({
+      chartId,
+      renderer: props.renderer,
+      width,
+      height,
+      devicePixelRatio: props.devicePixelRatio,
+      dir: resolvedDir,
+      fontFamily: props.fontFamily,
+      fontSize: props.fontSize,
+      locale: toRef(props, "locale"),
+      theme: resolvedTheme
+    });
+    useAnimationProps(() => ({
+      animation: props.animation,
+      animations: props.animations,
+      transitions: props.transitions
+    }), methods);
+    const containerRef = ref(null);
+    const mainCanvasRef = ref(null);
+    const overlayCanvasRef = ref(null);
+    const annotationCanvasRef = ref(null);
+    const setSizeContainerRef = (el) => {
+      sizeContainerRef.value = el;
+    };
+    const setMainCanvasRef = (el) => {
+      mainCanvasRef.value = el;
+    };
+    const setOverlayCanvasRef = (el) => {
+      overlayCanvasRef.value = el;
+    };
+    const setAnnotationCanvasRef = (el) => {
+      annotationCanvasRef.value = el;
+    };
+    const captionEl = ref(null);
+    const measuredCaptionHeight = ref(0);
+    const drilldownState = useDrilldownState(computed(() => state.value.datasets));
+    const responsiveFeature = computed(() => state.value.features.get("responsive")?.props);
+    const { defaults: adaptive, ruleOverrides } = useResponsiveConfig(width, height, responsiveFeature, { size: props.fontSize });
+    const chartStateController = new ChartStateController();
+    onBeforeUnmount(() => chartStateController.destroy());
+    const coreState = computed(() => chartStateController.compute({
+      width: width.value,
+      height: height.value,
+      features: state.value.features,
+      datasets: state.value.datasets,
+      datasetVisibility: state.value.datasetVisibility,
+      hiddenItems: state.value.hiddenItems,
+      axes: state.value.axes,
+      rendererHint: rendererHint.value,
+      drilldownIsActive: drilldownState.isActive.value,
+      measuredCaptionHeight: measuredCaptionHeight.value,
+      theme: methods.theme,
+      adaptive: adaptive.value,
+      ruleOverrides: ruleOverrides.value,
+      globalFontFamily: props.fontFamily
+    }));
+    const isCartesian = computed(() => coreState.value.isCartesian);
+    const isRect = computed(() => coreState.value.isRect);
+    const hasCrosshair = computed(() => coreState.value.hasCrosshair);
+    const isSharedMode = computed(() => coreState.value.isSharedMode);
+    const tooltipConfig = computed(() => coreState.value.tooltipConfig);
+    const hoverConfig = computed(() => coreState.value.hoverConfig);
+    const legendConfig = computed(() => coreState.value.legendConfig);
+    const zoomConfig = computed(() => coreState.value.zoomConfig);
+    const keyboardNavEnabled = computed(() => coreState.value.keyboardNavEnabled);
+    const keyboardNavConfig = computed(() => coreState.value.keyboardNavConfig);
+    const a11yEnabled = computed(() => coreState.value.a11yEnabled);
+    const dataTable = computed(() => a11yEnabled.value ? buildChartDataTable(state.value.datasets) : null);
+    const a11yHeadingLevel = computed(() => coreState.value.a11yHeadingLevel);
+    const chartDescription = computed(() => coreState.value.chartDescription);
+    const chartTypeDescription = computed(() => coreState.value.chartTypeDescription);
+    const containerStyle = computed(() => coreState.value.containerStyle);
+    const titleConfig = computed(() => coreState.value.titleConfig);
+    const captionConfig = computed(() => coreState.value.captionConfig);
+    const titleStyle = computed(() => coreState.value.titleStyle);
+    const captionStyle = computed(() => coreState.value.captionStyle);
+    const chartArea = computed(() => coreState.value.chartArea);
+    const navigatorArea = computed(() => coreState.value.navigatorArea);
+    const navigatorConfig = computed(() => coreState.value.navigatorConfig);
+    const xAxisTickFormat = computed(() => coreState.value.xAxisTickFormat);
+    const legendArea = computed(() => coreState.value.legendArea);
+    const legendItems = computed(() => coreState.value.legendItems);
+    const effectiveLegendPosition = computed(() => coreState.value.effectiveLegendPosition);
+    const colorLegendConfig = computed(() => coreState.value.colorLegendConfig);
+    const colorLegendArea = computed(() => coreState.value.colorLegendArea);
+    const crosshairConfig = computed(() => coreState.value.crosshairConfig);
+    const resetButtonConfig = computed(() => coreState.value.resetButtonConfig);
+    const resetZoomTop = computed(() => coreState.value.resetZoomTop);
+    const breadcrumbConfig = computed(() => coreState.value.breadcrumbConfig);
+    const outerContainerStyle = computed(() => {
+      const themeVars = themeToCssVars(props.theme);
+      if (isFixed.value) {
+        return {
+          ...themeVars,
+          position: "relative",
+          ...props.style,
+          width: typeof props.width === "number" ? `${props.width}px` : void 0,
+          height: typeof props.height === "number" ? `${props.height}px` : void 0
+        };
+      }
+      return {
+        ...themeVars,
+        ...props.style,
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        ...typeof props.width === "number" ? { maxWidth: `${props.width}px` } : {},
+        ...typeof props.height === "number" ? { maxHeight: `${props.height}px` } : {}
+      };
+    });
+    const familyRenderers = provideFamilyRenderers();
+    provideChartLayers();
+    const cartesianRef = ref(null);
+    const radialRef = ref(null);
+    const rectRef = ref(null);
+    const rendererDelegate = computed(() => {
+      const active = coreState.value.isCartesian ? cartesianRef.value : coreState.value.isRect ? rectRef.value : radialRef.value;
+      if (!active) return null;
+      return active;
+    });
+    function wrappedDrillToLevel(index) {
+      rectRef.value?.prepareDrillOut();
+      drilldownState.drillToLevel(index);
+    }
+    const breadcrumbItems = computed(() => {
+      const path = drilldownState.path.value;
+      const renderFn = coreState.value.breadcrumbConfig?.renderItem;
+      return path.map((crumb, i) => {
+        const isActive = i === path.length - 1;
+        const ctx = {
+          label: crumb.label,
+          index: i,
+          isActive,
+          onClick: () => {
+            if (!isActive) wrappedDrillToLevel(i);
+          }
+        };
+        return {
+          crumb,
+          i,
+          isActive,
+          vnode: renderFn ? renderFn(ctx) ?? null : null
+        };
+      });
+    });
+    const autoColorScale = shallowRef(null);
+    watch([
+      () => state.value.datasets,
+      () => state.value.datasetVisibility,
+      () => coreState.value.chartArea,
+      rendererDelegate
+    ], () => {
+      const info = rendererDelegate.value?.getColorScaleInfo?.() ?? null;
+      const prev = autoColorScale.value;
+      if (prev === null && info === null) return;
+      if (prev && info && prev.min === info.min && prev.max === info.max && prev.colorScale.length === info.colorScale.length && prev.colorRange.length === info.colorRange.length && prev.colorScale.every((v, i) => v === info.colorScale[i]) && prev.colorRange.every((v, i) => v === info.colorRange[i])) {
+        return;
+      }
+      autoColorScale.value = info;
+    }, {
+      immediate: true,
+      flush: "post"
+    });
+    const hoveredColorValue = computed(() => {
+      if (!coreState.value.colorLegendConfig) return null;
+      if (!tooltip.value?.visible || tooltip.value.value == null) return null;
+      return typeof tooltip.value.value === "number" ? tooltip.value.value : null;
+    });
+    const { zoomState, resetZoom, updateZoom, getZoomState, isZoomed: chartIsZoomed, isDragging: zoomIsDragging, selectionRect } = useZoomPan({
+      zoomConfig,
+      containerRef,
+      getPlotArea: () => cartesianRef.value?.getPlotArea() ?? null,
+      getScales: () => cartesianRef.value?.getScales() ?? null,
+      getOriginalDomains: () => cartesianRef.value?.getOriginalDomains() ?? {},
+      isCartesian: computed(() => rendererHint.value === "cartesian")
+    });
+    watch(zoomConfig, (cfg) => {
+      const externalRef = cfg?.zoomRef;
+      if (!externalRef) return;
+      externalRef.current = {
+        setZoomState: updateZoom,
+        resetZoom,
+        getZoomState
+      };
+    }, { immediate: true });
+    const keyboardNav = useKeyboardNavigation({
+      enabled: keyboardNavEnabled,
+      config: keyboardNavConfig,
+      datasets: computed(() => state.value.datasets),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      setHover: methods.setHover,
+      rendererDelegate,
+      // Late-bound: coreMouseMove/coreMouseLeave are defined below (useChartContext).
+      // These closures only run on keydown, well after setup, so referencing them is safe.
+      emitFocusMove: (x, y) => coreMouseMove(x, y),
+      emitFocusLeave: () => coreMouseLeave()
+    });
+    const { syncInfo } = useChartSync({
+      chartId,
+      sync: () => props.sync
+    });
+    if (syncInfo) {
+      provide(CHART_SYNC_INFO_KEY, syncInfo);
+    }
+    const { tooltip, onMouseMove: coreMouseMove, onMouseLeave: coreMouseLeave, onClick: coreClick, onLegendClick: coreLegendClick, onLegendHover: coreLegendHover, onSyncedResult } = useChartContext({
+      coreCtx: {
+        coreChart,
+        emitHandlerRef,
+        setHover: methods.setHover
+      },
+      width,
+      height,
+      dir: resolvedDir,
+      theme: computed(() => methods.theme),
+      rendererDelegate,
+      drilldownEnabled: drilldownState.enabled,
+      onClickCb: computed(() => hoverConfig.value?.onClick),
+      onLegendClickCb: computed(() => legendConfig.value?.onClick),
+      syncInfo: syncInfo ?? null,
+      containerRef
+    });
+    provide(TOOLTIP_CONTEXT_KEY, tooltip);
+    useChartSyncCoordinator({
+      syncInfo: syncInfo ?? null,
+      datasets: computed(() => state.value.datasets),
+      datasetVisibility: computed(() => state.value.datasetVisibility),
+      theme: computed(() => methods.theme),
+      zoomState,
+      hasCrosshair,
+      isSharedMode,
+      isCartesian,
+      isRect,
+      width,
+      height,
+      getZoomState,
+      rendererDelegate,
+      updateZoom,
+      setDatasetVisibility: methods.setDatasetVisibility,
+      toggleItemVisibility: (seriesId, itemLabel) => methods.toggleItemVisibility(seriesId, itemLabel),
+      onSyncedResult
+    });
+    {
+      let captionRO = null;
+      watch(captionEl, (el) => {
+        captionRO?.disconnect();
+        captionRO = null;
+        if (!el) return;
+        captionRO = new ResizeObserver((entries) => {
+          const raw = entries[0]?.borderBoxSize?.[0]?.blockSize ?? entries[0]?.contentRect?.height ?? 0;
+          const h = Math.round(raw);
+          if (h > 0 && h !== measuredCaptionHeight.value) {
+            measuredCaptionHeight.value = h;
+          }
+        });
+        captionRO.observe(el);
+        const initialH = el.offsetHeight;
+        if (initialH > 0) measuredCaptionHeight.value = initialH;
+      });
+      onBeforeUnmount(() => {
+        captionRO?.disconnect();
+      });
+    }
+    watch([
+      () => props.renderer,
+      () => width.value,
+      () => height.value,
+      () => props.devicePixelRatio,
+      mainCanvasRef,
+      overlayCanvasRef
+    ], () => {
+      if (props.renderer !== "canvas" || !mainCanvasRef.value) return;
+      configureCanvasHiDPI(mainCanvasRef.value, width.value, height.value, props.devicePixelRatio);
+      if (overlayCanvasRef.value) {
+        configureCanvasHiDPI(overlayCanvasRef.value, width.value, height.value, props.devicePixelRatio);
+      }
+    }, { flush: "post" });
+    let _pendingMouseEvent = null;
+    let _mouseMoveRafId = 0;
+    function handleMouseMove(e) {
+      if (zoomIsDragging.value) return;
+      _pendingMouseEvent = e;
+      if (_mouseMoveRafId) return;
+      _mouseMoveRafId = requestAnimationFrame(() => {
+        _mouseMoveRafId = 0;
+        const evt = _pendingMouseEvent;
+        if (!evt) return;
+        _pendingMouseEvent = null;
+        processMouseMove(evt);
+      });
+    }
+    function processMouseMove(e) {
+      if (zoomIsDragging.value) return;
+      const rect = containerRef.value?.getBoundingClientRect();
+      if (!rect) return;
+      coreMouseMove(e.clientX - rect.left, e.clientY - rect.top);
+    }
+    function handleMouseMoveWithKeyboard(e) {
+      keyboardNav.onMouseMove();
+      handleMouseMove(e);
+    }
+    onBeforeUnmount(() => {
+      if (_mouseMoveRafId) cancelAnimationFrame(_mouseMoveRafId);
+    });
+    function handleKeyDown(e) {
+      if (keyboardNavEnabled.value) {
+        keyboardNav.onKeyDown(e);
+      }
+    }
+    function handleMouseDown() {
+      if (keyboardNavEnabled.value && containerRef.value) {
+        keyboardNav.notifyPointerDown();
+        containerRef.value.focus({ preventScroll: true });
+      }
+    }
+    function handleMouseLeave() {
+      coreMouseLeave();
+    }
+    function handleClick(e) {
+      if (!hoverConfig.value && !isRect.value && !drilldownState.enabled.value) return;
+      const rect = containerRef.value?.getBoundingClientRect();
+      if (!rect) return;
+      coreClick(e.clientX - rect.left, e.clientY - rect.top);
+    }
+    function handleLegendClick(item) {
+      coreLegendClick(item);
+    }
+    function handleLegendHover(item) {
+      coreLegendHover(item);
+    }
+    const crosshairData = computed(() => {
+      if (!crosshairConfig.value?.enabled || !tooltip.value?.visible || tooltip.value.cursorX == null || tooltip.value.cursorY == null) return null;
+      const plotArea = cartesianRef.value?.getPlotArea() ?? null;
+      const ctx = cartesianRef.value?.getCrosshairContext() ?? null;
+      if (!plotArea || !ctx) return null;
+      const clampedX = Math.max(plotArea.x, Math.min(tooltip.value.cursorX, plotArea.x + plotArea.width));
+      const clampedY = Math.max(plotArea.y, Math.min(tooltip.value.cursorY, plotArea.y + plotArea.height));
+      return computeCrosshairLayout({
+        plotArea,
+        ctx,
+        lineColor: crosshairConfig.value.color ?? methods.theme.crosshairColor,
+        dashArray: crosshairConfig.value.dashArray,
+        lineStrokeWidth: crosshairConfig.value.width,
+        showX: crosshairConfig.value.showX,
+        showY: crosshairConfig.value.showY,
+        badgeBg: methods.theme.tooltipBackground,
+        badgeTextColor: methods.theme.tooltipColor,
+        cursorX: tooltip.value.cursorX,
+        cursorY: tooltip.value.cursorY,
+        snapX: tooltip.value.snapX ?? clampedX,
+        snapY: tooltip.value.snapY ?? clampedY,
+        categoryText: tooltip.value.label ?? "",
+        cursorValueText: tooltip.value.cursorFormattedValue ?? "",
+        barValueText: tooltip.value.formattedValue ?? String(tooltip.value.value),
+        barColor: tooltip.value.color,
+        allSeriesHits: isSharedMode.value ? tooltip.value.allSeriesHits : void 0
+      });
+    });
+    const annotations = computed(() => state.value.annotations);
+    const annotationContext = computed(() => {
+      if (!annotations.value?.size || !chartArea.value) return null;
+      const outerArea = chartArea.value;
+      let xScale = null;
+      let yScale = null;
+      let getScale = null;
+      let plotArea = null;
+      if (isCartesian.value && cartesianRef.value) {
+        const scales = cartesianRef.value.getScales?.();
+        if (scales) {
+          xScale = scales.x ?? null;
+          yScale = scales.y ?? null;
+        }
+        if (!xScale && !yScale) {
+          const hmScales = cartesianRef.value.getHeatmapScales?.();
+          if (hmScales) {
+            xScale = hmScales.xScale;
+            yScale = hmScales.yScale;
+          }
+        }
+        const ref2 = cartesianRef.value;
+        getScale = (axisId) => ref2.getScaleById(axisId);
+        plotArea = ref2.getPlotArea?.() ?? null;
+      }
+      const ca = plotArea ?? outerArea;
+      const center = radialRef.value?.getCenter?.() ?? {
+        x: ca.x + ca.width / 2,
+        y: ca.y + ca.height / 2
+      };
+      const hover = hoverCtx.value.hover;
+      return buildAnnotationContext({
+        width: width.value,
+        height: height.value,
+        chartArea: ca,
+        center,
+        xScale,
+        yScale,
+        getScale,
+        fontFamily: props.fontFamily ?? DEFAULT_FONT_FAMILY,
+        hiddenItems: state.value.hiddenItems,
+        datasetVisibility: state.value.datasetVisibility,
+        hoveredItem: hover.datasetId !== null && hover.index !== null ? {
+          datasetId: hover.datasetId,
+          index: hover.index
+        } : null,
+        theme: methods.theme
+      });
+    });
+    const annotationClipRect = computed(() => {
+      const plot = chartIsZoomed.value ? annotationContext.value?.chartArea : null;
+      return plot ?? {
+        x: 0,
+        y: 0,
+        width: width.value,
+        height: height.value
+      };
+    });
+    const annotationElements = computed(() => {
+      if (props.renderer !== "svg") return null;
+      const ctx = annotationContext.value;
+      if (!ctx || !annotations.value?.size) return null;
+      const elements = [];
+      annotations.value.forEach((renderFn) => {
+        const result = renderFn(ctx);
+        if (result != null) elements.push(result);
+      });
+      return elements.length > 0 ? elements : null;
+    });
+    watch([annotationContext, annotations], () => {
+      if (props.renderer !== "canvas" || !annotationCanvasRef.value) return;
+      const ctx = annotationContext.value;
+      const annots = annotations.value;
+      configureCanvasHiDPI(annotationCanvasRef.value, width.value, height.value, props.devicePixelRatio);
+      const canvasCtx = annotationCanvasRef.value.getContext("2d");
+      if (!canvasCtx) return;
+      canvasCtx.clearRect(0, 0, annotationCanvasRef.value.width, annotationCanvasRef.value.height);
+      if (ctx && annots?.size) {
+        const clip = annotationClipRect.value;
+        canvasCtx.save();
+        canvasCtx.beginPath();
+        canvasCtx.rect(clip.x, clip.y, clip.width, clip.height);
+        canvasCtx.clip();
+        renderAnnotationsCanvas(canvasCtx, annots, ctx);
+        canvasCtx.restore();
+      }
+    }, { flush: "post" });
+    const frameCallbacks = /* @__PURE__ */ new Set();
+    const hoverCallbacks = /* @__PURE__ */ new Set();
+    const overlayRenders = /* @__PURE__ */ new Set();
+    const pluginTeardowns = [];
+    const pluginApis = shallowRef({});
+    const pluginOverlayGroupRef = ref(null);
+    const pluginOverlayCanvasRef = ref(null);
+    const setPluginOverlayGroupRef = (el) => {
+      pluginOverlayGroupRef.value = el;
+    };
+    const setPluginOverlayCanvasRef = (el) => {
+      pluginOverlayCanvasRef.value = el;
+    };
+    const hasPlugins = computed(() => Array.isArray(props.plugins) && props.plugins.length > 0);
+    function getPluginArea() {
+      if (isCartesian.value) {
+        const plot = cartesianRef.value?.getPlotArea?.();
+        if (plot) return plot;
+      }
+      return chartArea.value ?? null;
+    }
+    function buildPluginState() {
+      const s = state.value;
+      return {
+        datasets: s.datasets,
+        datasetVisibility: s.datasetVisibility,
+        hiddenItems: s.hiddenItems,
+        axes: s.axes,
+        features: s.features,
+        annotations: s.annotations,
+        orderCounter: 0
+      };
+    }
+    function buildPluginContext(options) {
+      return {
+        getState: () => buildPluginState(),
+        getDatasets: () => state.value.datasets,
+        getHover: () => {
+          const h = hoverCtx.value.hover;
+          return h.datasetId === null && h.index === null ? null : h;
+        },
+        onFrame: (cb) => {
+          frameCallbacks.add(cb);
+          return () => frameCallbacks.delete(cb);
+        },
+        onHover: (cb) => {
+          hoverCallbacks.add(cb);
+          return () => hoverCallbacks.delete(cb);
+        },
+        registerOverlay: (render) => {
+          overlayRenders.add(render);
+          paintPluginOverlays();
+          return () => {
+            overlayRenders.delete(render);
+            paintPluginOverlays();
+          };
+        },
+        getContainer: () => containerRef.value,
+        options,
+        onUnmounted: (fn) => {
+          pluginTeardowns.push(fn);
+        }
+      };
+    }
+    function paintPluginOverlays() {
+      if (overlayRenders.size === 0) return;
+      const area = getPluginArea();
+      if (!area) return;
+      const dpr = props.devicePixelRatio ?? (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
+      if (props.renderer === "svg") {
+        const g = pluginOverlayGroupRef.value;
+        if (!g) return;
+        while (g.firstChild) g.removeChild(g.firstChild);
+        for (const render of overlayRenders) {
+          try {
+            render({
+              ctx: null,
+              svg: g,
+              area,
+              dpr
+            });
+          } catch {
+          }
+        }
+      } else {
+        const canvas = pluginOverlayCanvasRef.value;
+        if (!canvas) return;
+        configureCanvasHiDPI(canvas, width.value, height.value, props.devicePixelRatio);
+        const c = canvas.getContext("2d");
+        if (!c) return;
+        c.clearRect(0, 0, canvas.width, canvas.height);
+        for (const render of overlayRenders) {
+          try {
+            c.save();
+            render({
+              ctx: c,
+              svg: null,
+              area,
+              dpr
+            });
+            c.restore();
+          } catch {
+            c.restore();
+          }
+        }
+      }
+    }
+    function runPluginFrame() {
+      for (const cb of frameCallbacks) {
+        try {
+          cb();
+        } catch {
+        }
+      }
+      paintPluginOverlays();
+    }
+    if (hasPlugins.value) {
+      watch([
+        coreState,
+        () => state.value.datasets,
+        () => state.value.datasetVisibility,
+        rendererDelegate,
+        width,
+        height
+      ], () => runPluginFrame(), { flush: "post" });
+      watch(() => hoverCtx.value.hover, (h) => {
+        const hover = h.datasetId === null && h.index === null ? null : h;
+        for (const cb of hoverCallbacks) {
+          try {
+            cb(hover);
+          } catch {
+          }
+        }
+      });
+      onMounted(() => {
+        const entries = props.plugins ?? [];
+        const installed = {};
+        for (const entry of entries) {
+          if (!entry) continue;
+          const plugin = Array.isArray(entry) ? entry[0] : entry;
+          const options = Array.isArray(entry) ? entry[1] : void 0;
+          if (!plugin || typeof plugin.install !== "function") continue;
+          try {
+            const ctx = buildPluginContext(options);
+            const expose = plugin.install(ctx);
+            if (plugin.name) {
+              installed[plugin.name] = expose ?? {};
+            }
+          } catch {
+          }
+        }
+        pluginApis.value = installed;
+        nextTick(() => runPluginFrame());
+      });
+      onBeforeUnmount(() => {
+        for (const fn of pluginTeardowns.splice(0)) {
+          try {
+            fn();
+          } catch {
+          }
+        }
+        frameCallbacks.clear();
+        hoverCallbacks.clear();
+        overlayRenders.clear();
+      });
+    }
+    __expose({
+      redraw,
+      $plugins: pluginApis
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref: setSizeContainerRef,
+        class: normalizeClass(props.class),
+        style: normalizeStyle(outerContainerStyle.value)
+      }, [
+        licenseResult.value && !licenseValid.value ? (openBlock(), createElementBlock("div", _hoisted_1, [_cache[4] || (_cache[4] = createElementVNode("span", { style: { "font-weight": "600" } }, "PrimeUI Chart", -1)), createElementVNode("span", null, toDisplayString(licenseMessage.value), 1)])) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", { plugins: pluginApis.value }),
+        createElementVNode("div", {
+          ref_key: "containerRef",
+          ref: containerRef,
+          "data-chart-container": chartId,
+          role: a11yEnabled.value ? "figure" : void 0,
+          "aria-label": a11yEnabled.value ? chartDescription.value : void 0,
+          "aria-roledescription": a11yEnabled.value ? "chart" : void 0,
+          tabindex: keyboardNavEnabled.value ? 0 : void 0,
+          style: normalizeStyle(containerStyle.value),
+          onMousedown: handleMouseDown,
+          onMousemove: handleMouseMoveWithKeyboard,
+          onMouseleave: handleMouseLeave,
+          onClick: handleClick,
+          onKeydown: handleKeyDown,
+          onFocus: _cache[2] || (_cache[2] = (...args) => unref(keyboardNav).onFocus && unref(keyboardNav).onFocus(...args)),
+          onBlur: _cache[3] || (_cache[3] = (...args) => unref(keyboardNav).onBlur && unref(keyboardNav).onBlur(...args))
+        }, [
+          a11yEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            (openBlock(), createBlock(resolveDynamicComponent(a11yHeadingLevel.value), null, {
+              default: withCtx(() => [createTextVNode(toDisplayString(titleConfig.value?.text ?? "Chart"), 1)]),
+              _: 1
+            })),
+            captionConfig.value?.text ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(captionConfig.value.text), 1)) : createCommentVNode("", true),
+            createElementVNode("p", null, toDisplayString(chartTypeDescription.value), 1),
+            dataTable.value ? (openBlock(), createElementBlock("table", _hoisted_5, [
+              createElementVNode("caption", null, toDisplayString(dataTable.value.caption), 1),
+              createElementVNode("thead", null, [createElementVNode("tr", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(dataTable.value.columns, (col, ci) => {
+                return openBlock(), createElementBlock("th", {
+                  key: ci,
+                  scope: "col"
+                }, toDisplayString(col), 1);
+              }), 128))])]),
+              createElementVNode("tbody", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(dataTable.value.rows, (row, ri) => {
+                return openBlock(), createElementBlock("tr", { key: ri }, [(openBlock(true), createElementBlock(Fragment, null, renderList(row, (cell, ci) => {
+                  return openBlock(), createElementBlock("td", { key: ci }, toDisplayString(cell), 1);
+                }), 128))]);
+              }), 128))]),
+              dataTable.value.truncatedRowCount > 0 ? (openBlock(), createElementBlock("tfoot", _hoisted_6, [createElementVNode("tr", null, [createElementVNode("td", { colspan: dataTable.value.columns.length }, toDisplayString(dataTable.value.truncatedRowCount) + " more rows not shown.", 9, _hoisted_7)])])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          titleConfig.value?.text && titleStyle.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            style: normalizeStyle(titleStyle.value),
+            class: "chart-title p-chart-title"
+          }, toDisplayString(titleConfig.value.text), 5)) : createCommentVNode("", true),
+          captionConfig.value?.text && captionStyle.value ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            ref_key: "captionEl",
+            ref: captionEl,
+            style: normalizeStyle(captionStyle.value),
+            class: "chart-caption p-chart-caption"
+          }, toDisplayString(captionConfig.value.text), 5)) : createCommentVNode("", true),
+          __props.renderer === "svg" && chartArea.value ? (openBlock(), createElementBlock("svg", {
+            key: 3,
+            width: unref(width),
+            height: unref(height),
+            role: a11yEnabled.value ? "img" : void 0,
+            "aria-label": a11yEnabled.value ? chartDescription.value : void 0,
+            style: normalizeStyle({
+              display: "block",
+              overflow: "hidden",
+              direction: "ltr",
+              fontFamily: props.fontFamily ?? unref(DEFAULT_FONT_FAMILY)
+            })
+          }, [
+            isCartesian.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(familyRenderers).cartesian), {
+              key: 0,
+              ref_key: "cartesianRef",
+              ref: cartesianRef,
+              "chart-area": chartArea.value,
+              width: unref(width),
+              height: unref(height),
+              "canvas-el": mainCanvasRef.value,
+              "zoom-state": unref(zoomState),
+              "adaptive-data-label-font-size": unref(adaptive).dataLabelFontSize,
+              "adaptive-data-label-rotation": unref(adaptive).dataLabelRotation,
+              "rule-overrides": unref(ruleOverrides)
+            }, null, 8, [
+              "chart-area",
+              "width",
+              "height",
+              "canvas-el",
+              "zoom-state",
+              "adaptive-data-label-font-size",
+              "adaptive-data-label-rotation",
+              "rule-overrides"
+            ])) : isRect.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(familyRenderers).rect), {
+              key: 1,
+              ref_key: "rectRef",
+              ref: rectRef,
+              "chart-area": chartArea.value,
+              width: unref(width),
+              height: unref(height),
+              "canvas-el": mainCanvasRef.value,
+              "drilldown-state": unref(drilldownState)
+            }, null, 8, [
+              "chart-area",
+              "width",
+              "height",
+              "canvas-el",
+              "drilldown-state"
+            ])) : chartArea.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(familyRenderers).radial), {
+              key: 2,
+              ref_key: "radialRef",
+              ref: radialRef,
+              "chart-area": chartArea.value,
+              width: unref(width),
+              height: unref(height),
+              "canvas-el": mainCanvasRef.value,
+              "container-el": containerRef.value,
+              "adaptive-data-label-font-size": unref(adaptive).dataLabelFontSize
+            }, null, 8, [
+              "chart-area",
+              "width",
+              "height",
+              "canvas-el",
+              "container-el",
+              "adaptive-data-label-font-size"
+            ])) : createCommentVNode("", true),
+            navigatorArea.value && navigatorConfig.value ? (openBlock(), createBlock(NavigatorRenderer_default, {
+              key: 3,
+              area: navigatorArea.value,
+              config: navigatorConfig.value,
+              datasets: unref(state).datasets,
+              "zoom-state": unref(zoomState),
+              "update-zoom": unref(updateZoom),
+              "chart-id": chartId,
+              "is-time-axis": cartesianRef.value?.isTimeAxis,
+              "tick-format": xAxisTickFormat.value
+            }, null, 8, [
+              "area",
+              "config",
+              "datasets",
+              "zoom-state",
+              "update-zoom",
+              "is-time-axis",
+              "tick-format"
+            ])) : createCommentVNode("", true),
+            hasPlugins.value ? (openBlock(), createElementBlock("g", {
+              key: 4,
+              ref: setPluginOverlayGroupRef,
+              class: "p-chart-plugin-overlay"
+            })) : createCommentVNode("", true),
+            annotationElements.value ? (openBlock(), createElementBlock("defs", _hoisted_9, [createElementVNode("clipPath", { id: `${chartId}-annotation-clip` }, [createElementVNode("rect", {
+              x: annotationClipRect.value.x,
+              y: annotationClipRect.value.y,
+              width: annotationClipRect.value.width,
+              height: annotationClipRect.value.height
+            }, null, 8, _hoisted_11)], 8, _hoisted_10)])) : createCommentVNode("", true),
+            annotationElements.value ? (openBlock(), createElementBlock("g", {
+              key: 6,
+              class: "p-chart-annotations",
+              fill: annotationContext.value?.textColor,
+              "clip-path": `url(#${chartId}-annotation-clip)`
+            }, [(openBlock(true), createElementBlock(Fragment, null, renderList(annotationElements.value, (el, i) => {
+              return openBlock(), createBlock(resolveDynamicComponent(() => el), { key: i });
+            }), 128))], 8, _hoisted_12)) : createCommentVNode("", true)
+          ], 12, _hoisted_8)) : createCommentVNode("", true),
+          __props.renderer === "canvas" && chartArea.value ? (openBlock(), createElementBlock("div", _hoisted_13, [
+            createElementVNode("canvas", {
+              ref: setMainCanvasRef,
+              role: "img",
+              "aria-label": a11yEnabled.value ? chartDescription.value : void 0,
+              width: unref(width),
+              height: unref(height),
+              style: normalizeStyle({
+                display: "block",
+                direction: "ltr",
+                fontFamily: props.fontFamily ?? unref(DEFAULT_FONT_FAMILY)
+              })
+            }, null, 12, _hoisted_14),
+            createElementVNode("canvas", {
+              ref: setOverlayCanvasRef,
+              "aria-hidden": "true",
+              width: unref(width),
+              height: unref(height),
+              style: {
+                position: "absolute",
+                top: "0px",
+                left: "0px",
+                pointerEvents: "none",
+                direction: "ltr"
+              }
+            }, null, 8, _hoisted_15),
+            createElementVNode("canvas", {
+              ref: setAnnotationCanvasRef,
+              "aria-hidden": "true",
+              width: unref(width),
+              height: unref(height),
+              style: {
+                position: "absolute",
+                top: "0px",
+                left: "0px",
+                pointerEvents: "none",
+                direction: "ltr"
+              }
+            }, null, 8, _hoisted_16),
+            hasPlugins.value ? (openBlock(), createElementBlock("canvas", {
+              key: 0,
+              ref: setPluginOverlayCanvasRef,
+              "aria-hidden": "true",
+              width: unref(width),
+              height: unref(height),
+              style: {
+                position: "absolute",
+                top: "0px",
+                left: "0px",
+                pointerEvents: "none",
+                direction: "ltr"
+              }
+            }, null, 8, _hoisted_17)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true),
+          isCartesian.value && __props.renderer === "canvas" && chartArea.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(familyRenderers).cartesian), {
+            key: 5,
+            ref_key: "cartesianRef",
+            ref: cartesianRef,
+            "chart-area": chartArea.value,
+            width: unref(width),
+            height: unref(height),
+            "canvas-el": mainCanvasRef.value,
+            "overlay-canvas-el": overlayCanvasRef.value,
+            "zoom-state": unref(zoomState),
+            "adaptive-data-label-font-size": unref(adaptive).dataLabelFontSize,
+            "adaptive-data-label-rotation": unref(adaptive).dataLabelRotation,
+            "rule-overrides": unref(ruleOverrides)
+          }, null, 8, [
+            "chart-area",
+            "width",
+            "height",
+            "canvas-el",
+            "overlay-canvas-el",
+            "zoom-state",
+            "adaptive-data-label-font-size",
+            "adaptive-data-label-rotation",
+            "rule-overrides"
+          ])) : isRect.value && __props.renderer === "canvas" && chartArea.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(familyRenderers).rect), {
+            key: 6,
+            ref_key: "rectRef",
+            ref: rectRef,
+            "chart-area": chartArea.value,
+            width: unref(width),
+            height: unref(height),
+            "canvas-el": mainCanvasRef.value,
+            "drilldown-state": unref(drilldownState)
+          }, null, 8, [
+            "chart-area",
+            "width",
+            "height",
+            "canvas-el",
+            "drilldown-state"
+          ])) : __props.renderer === "canvas" && chartArea.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(familyRenderers).radial), {
+            key: 7,
+            ref_key: "radialRef",
+            ref: radialRef,
+            "chart-area": chartArea.value,
+            width: unref(width),
+            height: unref(height),
+            "canvas-el": mainCanvasRef.value,
+            "container-el": containerRef.value,
+            "adaptive-data-label-font-size": unref(adaptive).dataLabelFontSize
+          }, null, 8, [
+            "chart-area",
+            "width",
+            "height",
+            "canvas-el",
+            "container-el",
+            "adaptive-data-label-font-size"
+          ])) : createCommentVNode("", true),
+          __props.renderer === "canvas" && navigatorArea.value && navigatorConfig.value ? (openBlock(), createBlock(NavigatorRenderer_default, {
+            key: 8,
+            area: navigatorArea.value,
+            config: navigatorConfig.value,
+            datasets: unref(state).datasets,
+            "zoom-state": unref(zoomState),
+            "update-zoom": unref(updateZoom),
+            "chart-id": chartId,
+            "is-time-axis": cartesianRef.value?.isTimeAxis,
+            "tick-format": xAxisTickFormat.value,
+            renderer: "canvas"
+          }, null, 8, [
+            "area",
+            "config",
+            "datasets",
+            "zoom-state",
+            "update-zoom",
+            "is-time-axis",
+            "tick-format"
+          ])) : createCommentVNode("", true),
+          legendConfig.value && unref(ruleOverrides).legend?.enabled !== false ? (openBlock(), createBlock(LegendRenderer_default, {
+            key: 9,
+            "legend-config": legendConfig.value,
+            "legend-area": legendArea.value,
+            "legend-items": legendItems.value,
+            "on-legend-click": handleLegendClick,
+            "on-legend-hover": handleLegendHover,
+            "adaptive-font-size": unref(adaptive).legendItemFontSize,
+            "effective-position": effectiveLegendPosition.value,
+            "global-font-family": props.fontFamily,
+            dir: resolvedDir.value
+          }, null, 8, [
+            "legend-config",
+            "legend-area",
+            "legend-items",
+            "adaptive-font-size",
+            "effective-position",
+            "global-font-family",
+            "dir"
+          ])) : createCommentVNode("", true),
+          colorLegendConfig.value && colorLegendArea.value ? (openBlock(), createBlock(ColorLegendRenderer_default, {
+            key: 10,
+            config: colorLegendConfig.value,
+            area: colorLegendArea.value,
+            "auto-color-scale": autoColorScale.value,
+            "hovered-value": hoveredColorValue.value
+          }, null, 8, [
+            "config",
+            "area",
+            "auto-color-scale",
+            "hovered-value"
+          ])) : createCommentVNode("", true),
+          crosshairData.value && !unref(zoomIsDragging) ? (openBlock(), createElementBlock("svg", {
+            key: 11,
+            width: unref(width),
+            height: unref(height),
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              overflow: "visible",
+              direction: "ltr"
+            },
+            class: "chart-crosshair"
+          }, [
+            crosshairData.value.showX ? (openBlock(), createElementBlock("line", {
+              key: 0,
+              x1: crosshairData.value.cursorX,
+              y1: crosshairData.value.plotArea.y,
+              x2: crosshairData.value.cursorX,
+              y2: crosshairData.value.plotArea.y + crosshairData.value.plotArea.height,
+              stroke: crosshairData.value.lineColor,
+              "stroke-width": crosshairData.value.sw,
+              "stroke-dasharray": crosshairData.value.dash
+            }, null, 8, _hoisted_19)) : createCommentVNode("", true),
+            crosshairData.value.showY ? (openBlock(), createElementBlock("line", {
+              key: 1,
+              x1: crosshairData.value.plotArea.x,
+              y1: crosshairData.value.cursorY,
+              x2: crosshairData.value.plotArea.x + crosshairData.value.plotArea.width,
+              y2: crosshairData.value.cursorY,
+              stroke: crosshairData.value.lineColor,
+              "stroke-width": crosshairData.value.sw,
+              "stroke-dasharray": crosshairData.value.dash
+            }, null, 8, _hoisted_20)) : createCommentVNode("", true),
+            crosshairData.value.catBadge ? (openBlock(), createElementBlock("g", _hoisted_21, [createElementVNode("rect", {
+              class: "p-chart-crosshair-badge",
+              x: crosshairData.value.catBadge.x,
+              y: crosshairData.value.catBadge.y,
+              width: crosshairData.value.catBadge.w,
+              height: crosshairData.value.catBadge.h,
+              rx: crosshairData.value.badgeRadius
+            }, null, 8, _hoisted_22), createElementVNode("text", {
+              class: "p-chart-crosshair-badge-text",
+              x: crosshairData.value.catBadge.textX,
+              y: crosshairData.value.catBadge.textY,
+              "text-anchor": "middle",
+              "dominant-baseline": "central",
+              "font-size": crosshairData.value.badgeFontSize,
+              "font-family": "Arial, sans-serif"
+            }, toDisplayString(crosshairData.value.catBadge.text), 9, _hoisted_23)])) : createCommentVNode("", true),
+            crosshairData.value.valBadge ? (openBlock(), createElementBlock("g", _hoisted_24, [createElementVNode("rect", {
+              class: "p-chart-crosshair-badge",
+              x: crosshairData.value.valBadge.x,
+              y: crosshairData.value.valBadge.y,
+              width: crosshairData.value.valBadge.w,
+              height: crosshairData.value.valBadge.h,
+              rx: crosshairData.value.badgeRadius
+            }, null, 8, _hoisted_25), createElementVNode("text", {
+              class: "p-chart-crosshair-badge-text",
+              x: crosshairData.value.valBadge.textX,
+              y: crosshairData.value.valBadge.textY,
+              "text-anchor": "middle",
+              "dominant-baseline": "central",
+              "font-size": crosshairData.value.badgeFontSize,
+              "font-family": "Arial, sans-serif"
+            }, toDisplayString(crosshairData.value.valBadge.text), 9, _hoisted_26)])) : createCommentVNode("", true),
+            crosshairData.value.barLabel ? (openBlock(), createElementBlock("g", _hoisted_27, [createElementVNode("rect", {
+              x: crosshairData.value.barLabel.x,
+              y: crosshairData.value.barLabel.y,
+              width: crosshairData.value.barLabel.w,
+              height: crosshairData.value.barLabel.h,
+              rx: crosshairData.value.badgeRadius,
+              fill: crosshairData.value.barLabel.color
+            }, null, 8, _hoisted_28), createElementVNode("text", {
+              x: crosshairData.value.barLabel.textX,
+              y: crosshairData.value.barLabel.textY,
+              "text-anchor": "middle",
+              "dominant-baseline": "central",
+              fill: "#ffffff",
+              "font-size": crosshairData.value.badgeFontSize,
+              "font-weight": 500,
+              "font-family": "Arial, sans-serif"
+            }, toDisplayString(crosshairData.value.barLabel.text), 9, _hoisted_29)])) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(crosshairData.value.seriesLabels, (label, i) => {
+              return openBlock(), createElementBlock("g", { key: i }, [createElementVNode("rect", {
+                x: label.x,
+                y: label.y,
+                width: label.w,
+                height: label.h,
+                rx: crosshairData.value.badgeRadius,
+                fill: label.color
+              }, null, 8, _hoisted_30), createElementVNode("text", {
+                x: label.textX,
+                y: label.textY,
+                "text-anchor": "middle",
+                "dominant-baseline": "central",
+                fill: "#ffffff",
+                "font-size": crosshairData.value.badgeFontSize,
+                "font-weight": 500,
+                "font-family": "Arial, sans-serif"
+              }, toDisplayString(label.text), 9, _hoisted_31)]);
+            }), 128))
+          ], 8, _hoisted_18)) : createCommentVNode("", true),
+          tooltipConfig.value && !hasCrosshair.value && !unref(zoomIsDragging) && unref(ruleOverrides).tooltip?.enabled !== false ? (openBlock(), createBlock(TooltipRenderer_default, {
+            key: 12,
+            "tooltip-config": tooltipConfig.value,
+            rtl: resolvedDir.value === "rtl",
+            locale: unref(methods).locale,
+            width: unref(width),
+            height: unref(height)
+          }, null, 8, [
+            "tooltip-config",
+            "rtl",
+            "locale",
+            "width",
+            "height"
+          ])) : createCommentVNode("", true),
+          unref(selectionRect) ? (openBlock(), createElementBlock("svg", {
+            key: 13,
+            width: unref(width),
+            height: unref(height),
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none",
+              zIndex: 5
+            }
+          }, [createElementVNode("rect", {
+            x: unref(selectionRect).x,
+            y: unref(selectionRect).y,
+            width: unref(selectionRect).width,
+            height: unref(selectionRect).height,
+            fill: "rgba(59, 130, 246, 0.15)",
+            stroke: "rgba(59, 130, 246, 0.6)",
+            "stroke-width": 1,
+            rx: "2"
+          }, null, 8, _hoisted_33)], 8, _hoisted_32)) : createCommentVNode("", true),
+          unref(chartIsZoomed) && chartArea.value && resetButtonConfig.value !== null ? (openBlock(), createElementBlock("button", {
+            key: 14,
+            class: normalizeClass(["chart-reset-zoom", resetButtonConfig.value?.className].filter(Boolean).join(" ")),
+            style: normalizeStyle({
+              position: "absolute",
+              top: `${resetZoomTop.value}px`,
+              [resolvedDir.value === "rtl" ? "left" : "right"]: `${unref(width) - chartArea.value.x - chartArea.value.width + 8}px`,
+              padding: "3px 8px",
+              fontSize: "11px",
+              fontWeight: "500",
+              border: "1px solid rgba(0,0,0,0.15)",
+              borderRadius: "4px",
+              background: "rgba(255,255,255,0.92)",
+              color: "#374151",
+              cursor: "pointer",
+              zIndex: 10,
+              backdropFilter: "blur(4px)",
+              lineHeight: "1.4"
+            }),
+            onClick: _cache[0] || (_cache[0] = withModifiers(
+              //@ts-ignore
+              (...args) => unref(resetZoom) && unref(resetZoom)(...args),
+              ["stop"]
+            ))
+          }, toDisplayString(resetButtonConfig.value?.text ?? "Reset zoom"), 7)) : createCommentVNode("", true),
+          unref(drilldownState).isActive.value && chartArea.value ? (openBlock(), createElementBlock("nav", {
+            key: 15,
+            onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+            }, ["stop"])),
+            class: normalizeClass(breadcrumbConfig.value?.class),
+            style: normalizeStyle({
+              position: "absolute",
+              top: `${chartArea.value.y - 28}px`,
+              height: "25px",
+              boxSizing: "border-box",
+              left: "0",
+              right: "0",
+              display: "flex",
+              alignItems: "center",
+              padding: "6px 8px",
+              fontSize: "13px",
+              zIndex: 10,
+              pointerEvents: "auto",
+              color: "white",
+              background: "rgba(0, 0, 0, 0.55)",
+              backdropFilter: "blur(4px)",
+              ...breadcrumbConfig.value?.style
+            })
+          }, [(openBlock(true), createElementBlock(Fragment, null, renderList(breadcrumbItems.value, (item) => {
+            return openBlock(), createElementBlock(Fragment, { key: item.i }, [item.i > 0 ? (openBlock(), createElementBlock("span", _hoisted_34, toDisplayString(breadcrumbConfig.value?.separator ?? " / "), 1)) : createCommentVNode("", true), item.vnode ? (openBlock(), createBlock(unref(VNodeRenderer), {
+              key: 1,
+              node: item.vnode
+            }, null, 8, ["node"])) : (openBlock(), createElementBlock("span", {
+              key: 2,
+              style: normalizeStyle({
+                cursor: item.isActive ? "default" : "pointer",
+                fontWeight: item.isActive ? "600" : "400",
+                opacity: item.isActive ? 1 : 0.7,
+                textDecoration: item.isActive ? "none" : "underline"
+              }),
+              onClick: ($event) => item.isActive ? void 0 : wrappedDrillToLevel(item.i)
+            }, toDisplayString(item.crumb.label), 13, _hoisted_35))], 64);
+          }), 128))], 6)) : createCommentVNode("", true),
+          unref(keyboardNav).state.value.active && unref(keyboardNav).focusPosition.value ? (openBlock(), createElementBlock("svg", {
+            key: 16,
+            width: unref(width),
+            height: unref(height),
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              pointerEvents: "none"
+            },
+            class: "chart-focus-indicator"
+          }, [createElementVNode("rect", {
+            x: unref(keyboardNav).focusPosition.value.x - (keyboardNavConfig.value?.focusBorder?.margin ?? 2),
+            y: unref(keyboardNav).focusPosition.value.y - (keyboardNavConfig.value?.focusBorder?.margin ?? 2),
+            width: unref(keyboardNav).focusPosition.value.width + (keyboardNavConfig.value?.focusBorder?.margin ?? 2) * 2,
+            height: unref(keyboardNav).focusPosition.value.height + (keyboardNavConfig.value?.focusBorder?.margin ?? 2) * 2,
+            rx: keyboardNavConfig.value?.focusBorder?.style?.borderRadius ?? (unref(keyboardNav).focusPosition.value.shape === "circle" ? 999 : 3),
+            fill: "none",
+            stroke: keyboardNavConfig.value?.focusBorder?.style?.color ?? "var(--p-chart-title-color, #888)",
+            "stroke-width": keyboardNavConfig.value?.focusBorder?.style?.width ?? 2,
+            "stroke-dasharray": keyboardNavConfig.value?.focusBorder?.style?.lineStyle === "dotted" ? "2 2" : keyboardNavConfig.value?.focusBorder?.style?.lineStyle === "solid" ? void 0 : "4 3"
+          }, null, 8, _hoisted_37)], 8, _hoisted_36)) : createCommentVNode("", true),
+          keyboardNavEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_38, toDisplayString(unref(keyboardNav).announcement.value), 1)) : createCommentVNode("", true)
+        ], 44, _hoisted_2)
+      ], 6);
+    };
+  }
+});
+var Chart_default = _sfc_main;
+
+export { Chart_default };