@chartts/core 0.1.1 → 0.1.3

package/dist/{chunk-XHQWWR5M.cjs → chunk-UMIJYYF3.cjs}

@@ -473,7 +473,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-point-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 30ms + 0.4s);
+  animation-delay: calc(var(--chartts-i, 0) * 10ms + 0.4s);
   opacity: 0;
   transition: opacity 0.15s ease, stroke-width 0.15s ease;
   cursor: pointer;
@@ -492,7 +492,7 @@ var CHART_CSS = (
   transform-origin: bottom center;
   transform-box: fill-box;
   animation: chartts-bar-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
   opacity: 0;
   transition: filter 0.15s ease, opacity 0.15s ease;
   cursor: pointer;
@@ -518,15 +518,15 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-slice-in 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  animation-delay: calc(var(--chartts-i, 0) * 25ms);
   opacity: 0;
-  transition: filter 0.15s ease, opacity 0.15s ease;
+  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
   cursor: pointer;
   pointer-events: all;
 }
 .chartts-slice:hover {
-  filter: brightness(1.1) saturate(1.15);
-  opacity: 0.92;
+  filter: brightness(1.08) saturate(1.15) drop-shadow(0 2px 8px rgba(0,0,0,0.2));
+  transform: scale(1.04);
 }
 
 /* ---- Sparkline ---- */
@@ -547,7 +547,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-radar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc(var(--chartts-radar-i, 0) * 120ms);
+  animation-delay: calc(var(--chartts-radar-i, 0) * 35ms);
   opacity: 0;
   transition: opacity 0.2s ease, fill-opacity 0.2s ease;
 }
@@ -558,7 +558,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-point-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 30ms + 0.5s);
+  animation-delay: calc(var(--chartts-i, 0) * 10ms + 0.5s);
   opacity: 0;
   transition: r 0.15s ease, opacity 0.15s ease;
   cursor: pointer;
@@ -598,7 +598,7 @@ var CHART_CSS = (
 }
 .chartts-funnel-step {
   animation: chartts-funnel-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 80ms);
+  animation-delay: calc(var(--chartts-i, 0) * 25ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -614,7 +614,7 @@ var CHART_CSS = (
 }
 .chartts-waterfall-bar {
   animation: chartts-waterfall-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -632,7 +632,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-candle-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -654,7 +654,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-bubble-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
   opacity: 0;
   transition: filter 0.15s ease, opacity 0.15s ease;
   cursor: pointer;
@@ -668,7 +668,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-point-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 30ms);
+  animation-delay: calc(var(--chartts-i, 0) * 10ms);
   opacity: 0;
   transition: filter 0.15s ease, opacity 0.15s ease;
   cursor: pointer;
@@ -705,7 +705,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-boxplot-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  animation-delay: calc(var(--chartts-i, 0) * 3ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -726,7 +726,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-cell-grow 0.4s ease forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  animation-delay: calc(var(--chartts-i, 0) * 12ms);
   cursor: pointer;
   transition: filter 0.15s ease;
 }
@@ -746,7 +746,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-wedge-in 0.5s ease forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
   cursor: pointer;
   transition: filter 0.15s ease;
 }
@@ -767,7 +767,7 @@ var CHART_CSS = (
 }
 .chartts-radialbar-arc {
   animation: chartts-radialbar-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 100ms);
+  animation-delay: calc(var(--chartts-i, 0) * 30ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -788,7 +788,7 @@ var CHART_CSS = (
   transform-origin: bottom center;
   transform-box: fill-box;
   animation: chartts-lollipop-in 0.4s ease forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  animation-delay: calc(var(--chartts-i, 0) * 12ms);
 }
 .chartts-lollipop-dot {
   cursor: pointer;
@@ -807,7 +807,7 @@ var CHART_CSS = (
   transform-origin: left center;
   transform-box: fill-box;
   animation: chartts-bullet-in 0.5s ease forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 80ms);
+  animation-delay: calc(var(--chartts-i, 0) * 25ms);
   cursor: pointer;
   transition: filter 0.15s ease;
 }
@@ -828,7 +828,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-dumbbell-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  animation-delay: calc(var(--chartts-i, 0) * 3ms);
   opacity: 0;
   cursor: pointer;
   transition: filter 0.15s ease;
@@ -845,7 +845,7 @@ var CHART_CSS = (
   cursor: pointer;
   transition: filter 0.15s ease;
   animation: chartts-cell-in 0.3s ease forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 8ms);
+  animation-delay: calc(var(--chartts-i, 0) * 3ms);
 }
 .chartts-calendar-cell:hover {
   filter: brightness(1.2);
@@ -897,7 +897,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-sunburst-in 0.5s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 30ms);
+  animation-delay: calc(var(--chartts-i, 0) * 10ms);
   opacity: 0;
   transition: filter 0.15s ease, fill-opacity 0.15s ease;
   cursor: pointer;
@@ -920,7 +920,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-tree-node-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 50ms);
+  animation-delay: calc(var(--chartts-i, 0) * 15ms);
   opacity: 0;
   transition: filter 0.15s ease, r 0.15s ease;
   cursor: pointer;
@@ -946,7 +946,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-graph-node-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 40ms);
+  animation-delay: calc(var(--chartts-i, 0) * 12ms);
   opacity: 0;
   transition: filter 0.15s ease, r 0.15s ease;
   cursor: pointer;
@@ -992,7 +992,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-stream-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 80ms);
+  animation-delay: calc(var(--chartts-i, 0) * 25ms);
   opacity: 0;
   transition: fill-opacity 0.15s ease;
   cursor: pointer;
@@ -1014,7 +1014,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-pictorial-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 20ms);
+  animation-delay: calc(var(--chartts-i, 0) * 3ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -1035,7 +1035,7 @@ var CHART_CSS = (
   transform-origin: center;
   transform-box: fill-box;
   animation: chartts-chord-arc-in 0.5s ease forwards;
-  animation-delay: calc(var(--chartts-i, 0) * 60ms);
+  animation-delay: calc(var(--chartts-i, 0) * 3ms);
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -1071,7 +1071,7 @@ var CHART_CSS = (
 }
 .chartts-skeleton-bar {
   animation: chartts-shimmer 1.5s ease-in-out infinite;
-  animation-delay: calc(var(--chartts-i, 0) * 150ms);
+  animation-delay: calc(var(--chartts-i, 0) * 40ms);
 }
 
 /* ---- Grid ---- */
@@ -1085,19 +1085,32 @@ var CHART_CSS = (
   to { opacity: 1; }
 }
 .chartts-geo-region {
-  animation: chartts-geo-in 0.4s ease calc(var(--chartts-i, 0) * 30ms) forwards;
+  animation: chartts-geo-in 0.4s ease calc(var(--chartts-i, 0) * 3ms) forwards;
   opacity: 0;
-  transition: fill-opacity 0.2s ease, filter 0.15s ease;
+  transition: fill-opacity 0.15s ease, filter 0.15s ease, stroke-width 0.15s ease, stroke 0.15s ease;
   cursor: pointer;
 }
 .chartts-geo-region:hover {
-  filter: brightness(1.1);
+  filter: brightness(1.15) drop-shadow(0 0 2px rgba(0,0,0,0.3));
   fill-opacity: 0.95 !important;
+  stroke: #fff !important;
+  stroke-width: 1.5px !important;
+}
+.chartts-geo-label {
+  pointer-events: none;
+  text-shadow: 0 0 3px rgba(0,0,0,0.5), 0 0 6px rgba(0,0,0,0.3);
 }
 .chartts-geo-scatter {
-  transition: r 0.15s ease;
+  transition: r 0.15s ease, opacity 0.15s ease;
   cursor: pointer;
 }
+.chartts-geo-scatter:hover {
+  opacity: 0.9;
+  filter: drop-shadow(0 0 4px currentColor);
+}
+.chartts-geo-legend text {
+  user-select: none;
+}
 
 /* ---- Lines (flow) ---- */
 @keyframes chartts-lines-flow-in {
@@ -1106,7 +1119,7 @@ var CHART_CSS = (
 }
 .chartts-lines-flow {
   stroke-dasharray: 300;
-  animation: chartts-lines-flow-in 0.8s ease calc(var(--chartts-i, 0) * 80ms) forwards;
+  animation: chartts-lines-flow-in 0.8s ease calc(var(--chartts-i, 0) * 8ms) forwards;
   opacity: 0;
   transition: stroke-width 0.2s ease, stroke-opacity 0.2s ease;
   cursor: pointer;
@@ -1126,7 +1139,7 @@ var CHART_CSS = (
   to { opacity: 1; transform: scale(1); }
 }
 .chartts-matrix-cell {
-  animation: chartts-matrix-in 0.3s ease calc(var(--chartts-i, 0) * 15ms) forwards;
+  animation: chartts-matrix-in 0.3s ease calc(var(--chartts-i, 0) * 5ms) forwards;
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -1141,7 +1154,7 @@ var CHART_CSS = (
   to { opacity: 1; transform: scaleY(1); }
 }
 .chartts-ohlc-stem, .chartts-ohlc-tick {
-  animation: chartts-ohlc-in 0.3s ease calc(var(--chartts-i, 0) * 20ms) forwards;
+  animation: chartts-ohlc-in 0.3s ease calc(var(--chartts-i, 0) * 8ms) forwards;
   opacity: 0;
   transition: stroke-width 0.15s ease;
 }
@@ -1155,7 +1168,7 @@ var CHART_CSS = (
   to { opacity: 1; transform: scaleY(1); }
 }
 .chartts-volume-bar {
-  animation: chartts-volume-in 0.3s ease calc(var(--chartts-i, 0) * 20ms) forwards;
+  animation: chartts-volume-in 0.3s ease calc(var(--chartts-i, 0) * 8ms) forwards;
   opacity: 0;
   transition: filter 0.15s ease, fill-opacity 0.15s ease;
   cursor: pointer;
@@ -1208,7 +1221,7 @@ var CHART_CSS = (
 }
 .chartts-kagi-line {
   stroke-dasharray: 200;
-  animation: chartts-kagi-in 0.6s ease calc(var(--chartts-i, 0) * 40ms) forwards;
+  animation: chartts-kagi-in 0.6s ease calc(var(--chartts-i, 0) * 12ms) forwards;
   opacity: 0;
   transition: stroke-width 0.15s ease;
 }
@@ -1219,7 +1232,7 @@ var CHART_CSS = (
   to { opacity: 1; transform: scale(1); }
 }
 .chartts-renko-brick {
-  animation: chartts-renko-in 0.3s ease calc(var(--chartts-i, 0) * 25ms) forwards;
+  animation: chartts-renko-in 0.3s ease calc(var(--chartts-i, 0) * 8ms) forwards;
   opacity: 0;
   transition: filter 0.15s ease;
   cursor: pointer;
@@ -1257,6 +1270,38 @@ var CHART_CSS = (
   opacity: 0.7;
 }
 
+/* ---- Skip animations on data update ---- */
+.chartts-skip-anim .chartts-line, .chartts-skip-anim .chartts-area, .chartts-skip-anim .chartts-point,
+.chartts-skip-anim .chartts-bar, .chartts-skip-anim .chartts-slice, .chartts-skip-anim .chartts-bubble,
+.chartts-skip-anim .chartts-funnel-step, .chartts-skip-anim .chartts-waterfall-bar,
+.chartts-skip-anim .chartts-sparkline-line, .chartts-skip-anim .chartts-gauge-fill,
+.chartts-skip-anim .chartts-gauge-needle, .chartts-skip-anim .chartts-gauge-needle-cap,
+.chartts-skip-anim .chartts-radar-area, .chartts-skip-anim .chartts-radar-point,
+.chartts-skip-anim .chartts-treemap-cell, .chartts-skip-anim .chartts-polar-wedge,
+.chartts-skip-anim .chartts-lollipop-stem, .chartts-skip-anim .chartts-bullet-bar,
+.chartts-skip-anim .chartts-dumbbell-dot, .chartts-skip-anim .chartts-boxplot-box,
+.chartts-skip-anim .chartts-radialbar-arc, .chartts-skip-anim .chartts-sankey-link,
+.chartts-skip-anim .chartts-calendar-cell,
+.chartts-skip-anim .chartts-sunburst-sector, .chartts-skip-anim .chartts-tree-node,
+.chartts-skip-anim .chartts-graph-node, .chartts-skip-anim .chartts-graph-edge,
+.chartts-skip-anim .chartts-themeriver-stream, .chartts-skip-anim .chartts-pictorialbar-symbol,
+.chartts-skip-anim .chartts-chord-arc, .chartts-skip-anim .chartts-chord-ribbon,
+.chartts-skip-anim .chartts-geo-region, .chartts-skip-anim .chartts-lines-flow,
+.chartts-skip-anim .chartts-lines-node, .chartts-skip-anim .chartts-matrix-cell,
+.chartts-skip-anim .chartts-ohlc-stem, .chartts-skip-anim .chartts-ohlc-tick,
+.chartts-skip-anim .chartts-volume-bar, .chartts-skip-anim .chartts-range-band,
+.chartts-skip-anim .chartts-baseline-pos, .chartts-skip-anim .chartts-baseline-neg,
+.chartts-skip-anim .chartts-baseline-line, .chartts-skip-anim .chartts-kagi-line,
+.chartts-skip-anim .chartts-renko-brick {
+  animation: none !important;
+  opacity: 1 !important;
+}
+.chartts-skip-anim .chartts-line,
+.chartts-skip-anim .chartts-sparkline-line,
+.chartts-skip-anim .chartts-gauge-fill {
+  stroke-dashoffset: 0 !important;
+}
+
 /* ---- Reduced motion ---- */
 @media (prefers-reduced-motion: reduce) {
   .chartts-line, .chartts-area, .chartts-point,
@@ -1283,8 +1328,9 @@ var CHART_CSS = (
   .chartts-renko-brick {
     animation: none !important;
     opacity: 1 !important;
-    transform: none !important;
   }
+  .chartts-line,
+  .chartts-sparkline-line,
   .chartts-gauge-fill {
     stroke-dashoffset: 0 !important;
   }
@@ -1438,10 +1484,16 @@ function applyAttrs(el2, attrs) {
     stroke: "stroke",
     strokeWidth: "stroke-width",
     strokeDasharray: "stroke-dasharray",
+    strokeOpacity: "stroke-opacity",
+    strokeLinecap: "stroke-linecap",
+    strokeLinejoin: "stroke-linejoin",
     fill: "fill",
     fillOpacity: "fill-opacity",
     opacity: "opacity",
     transform: "transform",
+    filter: "filter",
+    cursor: "cursor",
+    pointerEvents: "pointer-events",
     role: "role",
     ariaLabel: "aria-label",
     tabindex: "tabindex"
@@ -1459,17 +1511,20 @@ function applyAttrs(el2, attrs) {
   }
 }
 function applyEntryAnimations(svg) {
-  svg.querySelectorAll(".chartts-line, .chartts-sparkline-line").forEach((p) => {
-    try {
-      const existing = p.getAttribute("stroke-dasharray");
-      if (existing && existing.includes(",")) return;
-      const len = p.getTotalLength();
-      p.style.setProperty("--chartts-path-len", String(len));
-      p.setAttribute("stroke-dasharray", String(len));
-      p.setAttribute("stroke-dashoffset", String(len));
-    } catch {
-    }
-  });
+  const skipAnim = svg.classList.contains("chartts-skip-anim");
+  if (!skipAnim) {
+    svg.querySelectorAll(".chartts-line, .chartts-sparkline-line").forEach((p) => {
+      try {
+        const existing = p.getAttribute("stroke-dasharray");
+        if (existing && existing.includes(",")) return;
+        const len = p.getTotalLength();
+        p.style.setProperty("--chartts-path-len", String(len));
+        p.setAttribute("stroke-dasharray", String(len));
+        p.setAttribute("stroke-dashoffset", String(len));
+      } catch {
+      }
+    });
+  }
   const STAGGER_SELECTORS = [
     ".chartts-point",
     ".chartts-bar",
@@ -1511,27 +1566,54 @@ function applyEntryAnimations(svg) {
       el2.style.setProperty("--chartts-i", String(i));
     });
   }
-  svg.querySelectorAll(".chartts-gauge-fill").forEach((p) => {
-    try {
-      const len = p.getTotalLength();
-      p.style.setProperty("--chartts-path-len", String(len));
-      p.setAttribute("stroke-dasharray", String(len));
-      p.setAttribute("stroke-dashoffset", String(len));
-    } catch {
-    }
-  });
+  if (!skipAnim) {
+    svg.querySelectorAll(".chartts-gauge-fill").forEach((p) => {
+      try {
+        const len = p.getTotalLength();
+        p.style.setProperty("--chartts-path-len", String(len));
+        p.setAttribute("stroke-dasharray", String(len));
+        p.setAttribute("stroke-dashoffset", String(len));
+      } catch {
+      }
+    });
+  }
   svg.querySelectorAll(".chartts-radar-area").forEach((el2, i) => {
     el2.style.setProperty("--chartts-radar-i", String(i));
   });
 }
 
 // src/render/canvas.ts
+var cssVarMap = {};
+function buildCssVarMap(theme) {
+  const p = "--chartts";
+  cssVarMap = {
+    [`${p}-bg`]: theme.background,
+    [`${p}-text`]: theme.textColor,
+    [`${p}-text-muted`]: theme.textMuted,
+    [`${p}-axis`]: theme.axisColor,
+    [`${p}-grid`]: theme.gridColor,
+    [`${p}-tooltip-bg`]: theme.tooltipBackground,
+    [`${p}-tooltip-text`]: theme.tooltipText,
+    [`${p}-tooltip-border`]: theme.tooltipBorder
+  };
+  theme.colors.forEach((c, i) => {
+    cssVarMap[`${p}-color-${i + 1}`] = typeof c === "string" ? c : String(c);
+  });
+}
 function resolveColor(value, fallback = "#000") {
   if (!value) return fallback;
   if (value === "none" || value === "transparent") return "transparent";
   if (value.startsWith("url(")) return value;
-  const match = value.match(/var\([^,]+,\s*([^)]+)\)/);
-  return match ? match[1].trim() : value;
+  const varMatch = value.match(/var\(\s*([^,)]+)(?:,\s*([^)]+))?\)/);
+  if (varMatch) {
+    const token = varMatch[1].trim();
+    const mapped = cssVarMap[token];
+    if (mapped) {
+      return resolveColor(mapped, varMatch[2]?.trim() ?? fallback);
+    }
+    return varMatch[2]?.trim() ?? fallback;
+  }
+  return value;
 }
 function hexToRgba(hex, alpha) {
   const h = hex.replace("#", "");
@@ -1595,9 +1677,10 @@ function mapTextBaseline(baseline) {
       return "alphabetic";
   }
 }
-function createCanvasRenderer(theme) {
-  const colors = theme.colors;
+function createCanvasRenderer(getTheme) {
+  const resolveTheme2 = typeof getTheme === "function" ? getTheme : () => getTheme;
   let clipPaths = /* @__PURE__ */ new Map();
+  let currentColors = [];
   return {
     createRoot(target, width, height, attrs) {
       const canvas = document.createElement("canvas");
@@ -1610,7 +1693,7 @@ function createCanvasRenderer(theme) {
       if (attrs?.class) canvas.className = attrs.class;
       if (attrs?.role) canvas.setAttribute("role", attrs.role);
       if (attrs?.ariaLabel) canvas.setAttribute("aria-label", attrs.ariaLabel);
-      const ctx2d = canvas.getContext("2d", { alpha: false });
+      const ctx2d = canvas.getContext("2d");
       ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
       target.appendChild(canvas);
       const root = { element: canvas };
@@ -1624,16 +1707,25 @@ function createCanvasRenderer(theme) {
       const cr = root;
       const canvas = cr.element;
       const dpr = window.devicePixelRatio || 1;
+      const theme = resolveTheme2();
+      const colors = theme.colors;
+      buildCssVarMap(theme);
       cr.width = canvas.width / dpr;
       cr.height = canvas.height / dpr;
       cr.dpr = dpr;
       clipPaths = /* @__PURE__ */ new Map();
+      currentColors = colors;
       const ctx = cr.ctx;
       ctx.imageSmoothingEnabled = true;
       ctx.imageSmoothingQuality = "high";
       ctx.save();
-      ctx.fillStyle = resolveColor(theme.background, "#ffffff");
-      ctx.fillRect(0, 0, cr.width, cr.height);
+      const bg = resolveColor(theme.background, "#ffffff");
+      if (bg === "transparent") {
+        ctx.clearRect(0, 0, cr.width, cr.height);
+      } else {
+        ctx.fillStyle = bg;
+        ctx.fillRect(0, 0, cr.width, cr.height);
+      }
       ctx.restore();
       collectClipPaths(nodes);
       drawNodes(cr.ctx, nodes, cr.width, cr.height);
@@ -1806,12 +1898,13 @@ function createCanvasRenderer(theme) {
         break;
       }
       case "text": {
-        const fill = resolveColor(node.attrs?.fill, theme.textColor);
+        const t = resolveTheme2();
+        const fill = resolveColor(node.attrs?.fill, t.textColor);
         const resolvedFill = resolveColor(fill);
         const opacity = node.attrs?.opacity ?? 1;
         const extra = node.attrs;
-        const fontSize = extra?.fontSize ?? theme.fontSize;
-        const fontFamily = extra?.fontFamily ?? theme.fontFamily;
+        const fontSize = extra?.fontSize ?? t.fontSize;
+        const fontFamily = extra?.fontFamily ?? t.fontFamily;
         const fontWeight = extra?.fontWeight ?? "normal";
         const textAnchor = extra?.textAnchor;
         const baseline = extra?.dominantBaseline;
@@ -1832,7 +1925,7 @@ function createCanvasRenderer(theme) {
     if (!fill) return "transparent";
     const urlId = parseUrlRef(fill);
     if (urlId) {
-      const grad = resolveGradientRef(urlId, colors, ctx, x, y, w, h);
+      const grad = resolveGradientRef(urlId, currentColors, ctx, x, y, w, h);
       return grad ?? resolveColor(fill);
     }
     return resolveColor(fill);
@@ -2821,7 +2914,12 @@ function createZoomPan(config, onUpdate, interactionState) {
       state.zoomX = newZoom;
     }
     if (cfg.y) {
-      state.zoomY = clamp(state.zoomY * delta, cfg.minZoom, cfg.maxZoom);
+      const mouseY = e.clientY - rect2.top;
+      const relY = (mouseY - area.y) / area.height;
+      const newZoomY = clamp(state.zoomY * delta, cfg.minZoom, cfg.maxZoom);
+      const zoomRatioY = newZoomY / state.zoomY;
+      state.panY = relY - (relY - state.panY) * zoomRatioY;
+      state.zoomY = newZoomY;
     }
     clampPan();
     onUpdate();
@@ -2859,30 +2957,46 @@ function createZoomPan(config, onUpdate, interactionState) {
     el2.releasePointerCapture(e.pointerId);
     el2.style.cursor = "crosshair";
   }
+  let lastPinchCenterX = 0;
+  let lastPinchCenterY = 0;
   function onTouchStart(e) {
     if (!cfg.pinch || e.touches.length !== 2) return;
     lastPinchDist = pinchDistance(e);
+    lastPinchCenterX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+    lastPinchCenterY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
   }
   function onTouchMove(e) {
-    if (!cfg.pinch || e.touches.length !== 2) return;
+    if (!cfg.pinch || e.touches.length !== 2 || !getArea) return;
     e.preventDefault();
+    const area = getArea();
+    const rect2 = el2.getBoundingClientRect();
     const dist = pinchDistance(e);
-    const scale = dist / lastPinchDist;
+    const scaleFactor = dist / lastPinchDist;
     lastPinchDist = dist;
+    const cx = (lastPinchCenterX - rect2.left - area.x) / area.width;
+    const cy = (lastPinchCenterY - rect2.top - area.y) / area.height;
+    lastPinchCenterX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+    lastPinchCenterY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
     if (cfg.x) {
-      state.zoomX = clamp(state.zoomX * scale, cfg.minZoom, cfg.maxZoom);
+      const newZoom = clamp(state.zoomX * scaleFactor, cfg.minZoom, cfg.maxZoom);
+      const ratio = newZoom / state.zoomX;
+      state.panX = cx - (cx - state.panX) * ratio;
+      state.zoomX = newZoom;
     }
     if (cfg.y) {
-      state.zoomY = clamp(state.zoomY * scale, cfg.minZoom, cfg.maxZoom);
+      const newZoom = clamp(state.zoomY * scaleFactor, cfg.minZoom, cfg.maxZoom);
+      const ratio = newZoom / state.zoomY;
+      state.panY = cy - (cy - state.panY) * ratio;
+      state.zoomY = newZoom;
     }
     clampPan();
     onUpdate();
   }
   function clampPan() {
-    const visibleX = 1 / state.zoomX;
-    state.panX = clamp(state.panX, -(1 - visibleX), 0);
-    const visibleY = 1 / state.zoomY;
-    state.panY = clamp(state.panY, -(1 - visibleY), 0);
+    const halfVisX = (1 - 1 / state.zoomX) / 2;
+    state.panX = clamp(state.panX, -halfVisX, halfVisX);
+    const halfVisY = (1 - 1 / state.zoomY) / 2;
+    state.panY = clamp(state.panY, -halfVisY, halfVisY);
   }
   function pinchDistance(e) {
     const dx = e.touches[0].clientX - e.touches[1].clientX;
@@ -3737,9 +3851,61 @@ function createTooltip(config, theme) {
   return { show, hide, destroy };
 }
 
+// src/interaction/highlight.ts
+function defaultHighlightNodes(hit, ctx) {
+  const color = resolveHighlightColor(ctx.data.series[hit.seriesIndex]?.color, ctx.theme);
+  const r = ctx.theme.pointRadius;
+  return [
+    // Outer glow
+    circle(hit.x, hit.y, r * 3, {
+      class: "chartts-highlight-glow",
+      fill: color,
+      fillOpacity: 0.2
+    }),
+    // Solid dot
+    circle(hit.x, hit.y, r + 1, {
+      class: "chartts-highlight-dot",
+      fill: color,
+      stroke: ctx.theme.background === "transparent" ? "#fff" : ctx.theme.background,
+      strokeWidth: 2
+    })
+  ];
+}
+function applyDimming(nodes, hit) {
+  return nodes.map((node) => dimNode(node, hit.seriesIndex));
+}
+function dimNode(node, activeSeriesIndex) {
+  if (node.type === "group") {
+    const cls = node.attrs?.class ?? "";
+    const seriesMatch = cls.match(/chartts-series-(\d+)/);
+    if (seriesMatch) {
+      const idx = parseInt(seriesMatch[1], 10);
+      if (idx !== activeSeriesIndex) {
+        return {
+          ...node,
+          attrs: { ...node.attrs, opacity: 0.3 },
+          children: node.children
+        };
+      }
+    }
+    return {
+      ...node,
+      children: node.children.map((c) => dimNode(c, activeSeriesIndex))
+    };
+  }
+  return node;
+}
+function resolveHighlightColor(cssVarString, theme) {
+  if (!cssVarString) return theme.colors[0] ?? "#3b82f6";
+  const m = cssVarString.match(/,\s*([^)]+)\)/);
+  if (m) return m[1].trim();
+  if (cssVarString.startsWith("#") || cssVarString.startsWith("rgb")) return cssVarString;
+  return theme.colors[0] ?? "#3b82f6";
+}
+
 // src/interaction/interaction.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
-function createInteractionLayer(chartType, getContext, getData, bus, tooltipConfig, theme, onClick, onHover, interactionState) {
+function createInteractionLayer(chartType, getContext, getData, bus, tooltipConfig, theme, onClick, onHover, interactionState, canvasHighlight) {
   let targetEl = null;
   let container = null;
   let tooltip = null;
@@ -3765,11 +3931,12 @@ function createInteractionLayer(chartType, getContext, getData, bus, tooltipConf
   }
   function syncOverlay() {
     if (!overlayEl || !targetEl) return;
-    const w = targetEl.clientWidth || parseInt(targetEl.style.width) || 400;
-    const h = targetEl.clientHeight || parseInt(targetEl.style.height) || 300;
+    const canvas = targetEl;
+    const w = canvas.offsetWidth || canvas.clientWidth || parseInt(canvas.style.width) || 400;
+    const h = canvas.offsetHeight || canvas.clientHeight || parseInt(canvas.style.height) || 300;
     overlayEl.setAttribute("viewBox", `0 0 ${w} ${h}`);
-    overlayEl.setAttribute("width", String(w));
-    overlayEl.setAttribute("height", String(h));
+    overlayEl.style.width = `${w}px`;
+    overlayEl.style.height = `${h}px`;
   }
   function getCrosshairConfig() {
     try {
@@ -4047,7 +4214,7 @@ function createInteractionLayer(chartType, getContext, getData, bus, tooltipConf
       };
       if (!activePoint || activePoint.seriesIndex !== hit.seriesIndex || activePoint.pointIndex !== hit.pointIndex) {
         clearHighlights();
-        highlightPoint(hit.seriesIndex, hit.pointIndex, svgX, svgY);
+        highlightPoint(hit);
         activePoint = { seriesIndex: hit.seriesIndex, pointIndex: hit.pointIndex };
         bus.emit("point:enter", { point, event: e });
         onHover?.(point, e);
@@ -4113,41 +4280,24 @@ function createInteractionLayer(chartType, getContext, getData, bus, tooltipConf
     }));
     linkedUnsubs.push(unsub1, unsub2);
   }
-  function highlightPoint(seriesIndex, pointIndex, hitX, hitY) {
-    const overlay = getOverlay();
-    if (!overlay) return;
-    if (isCanvas) {
-      if (hitX == null || hitY == null) return;
-      syncOverlay();
-      const data = getData();
-      const series = data.series[seriesIndex];
-      if (!series) return;
-      const glow = document.createElementNS(SVG_NS, "circle");
-      glow.setAttribute("cx", String(hitX));
-      glow.setAttribute("cy", String(hitY));
-      glow.setAttribute("r", "12");
-      glow.setAttribute("fill", "none");
-      glow.setAttribute("stroke", series.color);
-      glow.setAttribute("stroke-width", "2");
-      glow.setAttribute("opacity", "0.3");
-      glow.setAttribute("class", "chartts-canvas-highlight");
-      glow.style.pointerEvents = "none";
-      overlay.appendChild(glow);
-      const dot = document.createElementNS(SVG_NS, "circle");
-      dot.setAttribute("cx", String(hitX));
-      dot.setAttribute("cy", String(hitY));
-      dot.setAttribute("r", "5");
-      dot.setAttribute("fill", series.color);
-      dot.setAttribute("stroke", "#fff");
-      dot.setAttribute("stroke-width", "2");
-      dot.setAttribute("class", "chartts-canvas-highlight");
-      dot.style.pointerEvents = "none";
-      overlay.appendChild(dot);
+  let highlightRafId = 0;
+  function highlightPoint(hit) {
+    if (isCanvas && canvasHighlight) {
+      if (highlightRafId) return;
+      highlightRafId = requestAnimationFrame(() => {
+        highlightRafId = 0;
+        const ctx = getContext();
+        const baseNodes = canvasHighlight.getLastNodes();
+        const dimmed = applyDimming(baseNodes, hit);
+        const highlight = chartType.getHighlightNodes ? chartType.getHighlightNodes(ctx, hit) : defaultHighlightNodes(hit, ctx);
+        canvasHighlight.renderer.render(canvasHighlight.root, [...dimmed, ...highlight]);
+      });
       return;
     }
     const svg = targetEl;
+    if (!svg) return;
     const target = svg.querySelector(
-      `[data-series="${seriesIndex}"][data-index="${pointIndex}"]`
+      `[data-series="${hit.seriesIndex}"][data-index="${hit.pointIndex}"]`
     );
     if (target?.classList.contains("chartts-point")) {
       target.style.transition = "r 0.15s ease, stroke-width 0.15s ease";
@@ -4163,8 +4313,12 @@ function createInteractionLayer(chartType, getContext, getData, bus, tooltipConf
     });
   }
   function clearHighlights() {
-    if (isCanvas) {
-      overlayEl?.querySelectorAll(".chartts-canvas-highlight").forEach((el2) => el2.remove());
+    if (isCanvas && canvasHighlight) {
+      if (highlightRafId) {
+        cancelAnimationFrame(highlightRafId);
+        highlightRafId = 0;
+      }
+      canvasHighlight.renderer.render(canvasHighlight.root, canvasHighlight.getLastNodes());
       return;
     }
     const svg = targetEl;
@@ -4186,12 +4340,11 @@ function createInteractionLayer(chartType, getContext, getData, bus, tooltipConf
       if (isCanvas) {
         containerEl.style.position = "relative";
         overlayEl = document.createElementNS(SVG_NS, "svg");
-        const w = svgEl.clientWidth || parseInt(svgEl.style.width) || 400;
-        const h = svgEl.clientHeight || parseInt(svgEl.style.height) || 300;
+        const canvas = svgEl;
+        const w = canvas.offsetWidth || canvas.clientWidth || parseInt(canvas.style.width) || 400;
+        const h = canvas.offsetHeight || canvas.clientHeight || parseInt(canvas.style.height) || 300;
         overlayEl.setAttribute("viewBox", `0 0 ${w} ${h}`);
-        overlayEl.setAttribute("width", String(w));
-        overlayEl.setAttribute("height", String(h));
-        overlayEl.style.cssText = "position:absolute;top:0;left:0;pointer-events:none;overflow:visible;";
+        overlayEl.style.cssText = `position:absolute;top:0;left:0;width:${w}px;height:${h}px;pointer-events:none;overflow:visible;`;
         containerEl.appendChild(overlayEl);
       }
       svgEl.style.cursor = "crosshair";
@@ -4342,6 +4495,7 @@ function createChart(target, chartType, data, options = {}) {
   let lastPrepared = null;
   let chartState = "ready";
   let stateMessage;
+  let lastRenderedNodes = [];
   let resolvedRenderer = currentOptions.renderer;
   if (resolvedRenderer === "auto") {
     const totalPoints = data.series.reduce((sum, s) => sum + s.values.length, 0);
@@ -4349,7 +4503,7 @@ function createChart(target, chartType, data, options = {}) {
   }
   const useCanvas = resolvedRenderer === "canvas" || resolvedRenderer === "webgl";
   const bus = createEventBus();
-  const renderer = resolvedRenderer === "webgl" ? createWebGLRenderer(currentTheme) : resolvedRenderer === "canvas" ? createCanvasRenderer(currentTheme) : createSVGRenderer();
+  const renderer = resolvedRenderer === "webgl" ? createWebGLRenderer(currentTheme) : resolvedRenderer === "canvas" ? createCanvasRenderer(() => currentTheme) : createSVGRenderer();
   const root = renderer.createRoot(container, width, height, {
     class: `chartts ${currentOptions.className}`.trim(),
     role: "img",
@@ -4371,7 +4525,8 @@ function createChart(target, chartType, data, options = {}) {
     currentTheme,
     currentOptions.onClick,
     currentOptions.onHover,
-    interactionState
+    interactionState,
+    useCanvas ? { renderer, root, getLastNodes: () => lastRenderedNodes } : void 0
   );
   if (useCanvas) {
     interaction.attach(root.element, container);
@@ -4380,10 +4535,11 @@ function createChart(target, chartType, data, options = {}) {
   }
   let zoomPan = null;
   if (currentOptions.zoom || currentOptions.pan) {
+    const needs2DZoom = NO_AXES_TYPES.has(chartType.type);
     zoomPan = createZoomPan(
       {
         x: true,
-        y: false,
+        y: needs2DZoom,
         wheel: currentOptions.zoom,
         drag: currentOptions.pan,
         pinch: currentOptions.zoom
@@ -4427,11 +4583,18 @@ function createChart(target, chartType, data, options = {}) {
   });
   const stopThemeWatch = currentOptions.theme === "auto" ? watchScheme(() => {
     currentTheme = resolveTheme("auto");
-    applyTheme(root.element, currentTheme);
+    if (useCanvas) {
+      container.style.background = currentTheme.background;
+    } else {
+      applyTheme(root.element, currentTheme);
+    }
     render();
   }) : () => {
   };
   render();
+  requestAnimationFrame(() => {
+    root.element.classList.add("chartts-skip-anim");
+  });
   function render() {
     if (useCanvas) {
       const canvas = root.element;
@@ -4487,7 +4650,8 @@ function createChart(target, chartType, data, options = {}) {
       area,
       xScale,
       yScale,
-      theme: currentTheme
+      theme: currentTheme,
+      zoomPan: zoomPan ? zoomPan.getState() : void 0
     };
     lastCtx = ctx;
     const clipId = "chartts-clip";
@@ -4506,6 +4670,7 @@ function createChart(target, chartType, data, options = {}) {
       const legend = renderLegend(prepared, area, currentOptions, currentTheme);
       if (legend) nodes.push(legend);
     }
+    lastRenderedNodes = nodes;
     renderer.render(root, nodes);
     if (!useCanvas) {
       const NS2 = "http://www.w3.org/2000/svg";
@@ -4888,5 +5053,5 @@ exports.rect = rect;
 exports.renderToString = renderToString;
 exports.resolveTheme = resolveTheme;
 exports.text = text;
-//# sourceMappingURL=chunk-XHQWWR5M.cjs.map
-//# sourceMappingURL=chunk-XHQWWR5M.cjs.map
+//# sourceMappingURL=chunk-UMIJYYF3.cjs.map
+//# sourceMappingURL=chunk-UMIJYYF3.cjs.map