@chartts/core 0.1.2 → 0.1.3

package/dist/{chunk-3TLJCGGQ.cjs → chunk-UMIJYYF3.cjs}

@@ -1087,17 +1087,30 @@ var CHART_CSS = (
 .chartts-geo-region {
   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 {
@@ -1282,8 +1295,9 @@ var CHART_CSS = (
 .chartts-skip-anim .chartts-renko-brick {
   animation: none !important;
   opacity: 1 !important;
-  transform: none !important;
 }
+.chartts-skip-anim .chartts-line,
+.chartts-skip-anim .chartts-sparkline-line,
 .chartts-skip-anim .chartts-gauge-fill {
   stroke-dashoffset: 0 !important;
 }
@@ -1314,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;
   }
@@ -1469,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"
@@ -1490,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",
@@ -1542,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("#", "");
@@ -1626,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");
@@ -1641,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 };
@@ -1655,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);
@@ -1837,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;
@@ -1863,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);
@@ -2852,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();
@@ -2890,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;
@@ -3768,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;
@@ -3796,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 {
@@ -4078,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);
@@ -4144,43 +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 pointChartTypes = /* @__PURE__ */ new Set(["line", "scatter", "bubble", "area", "sparkline", "combo", "step", "baseline", "range"]);
-      if (!pointChartTypes.has(chartType.type)) return;
-      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";
@@ -4196,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;
@@ -4219,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";
@@ -4375,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);
@@ -4382,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",
@@ -4404,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);
@@ -4413,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
@@ -4460,12 +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();
-  root.element.classList.add("chartts-skip-anim");
+  requestAnimationFrame(() => {
+    root.element.classList.add("chartts-skip-anim");
+  });
   function render() {
     if (useCanvas) {
       const canvas = root.element;
@@ -4521,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";
@@ -4540,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";
@@ -4922,5 +5053,5 @@ exports.rect = rect;
 exports.renderToString = renderToString;
 exports.resolveTheme = resolveTheme;
 exports.text = text;
-//# sourceMappingURL=chunk-3TLJCGGQ.cjs.map
-//# sourceMappingURL=chunk-3TLJCGGQ.cjs.map
+//# sourceMappingURL=chunk-UMIJYYF3.cjs.map
+//# sourceMappingURL=chunk-UMIJYYF3.cjs.map