From 17069ce2756cf5ea16f89865931f328692ba3db5 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Sun, 3 May 2026 12:47:52 +0300
Subject: [PATCH 1/2] Container: Add `load` / `render` / `redraw` lifecycle
 events

---
 .../single-container.component.ts             | 35 ++++++++++++--
 .../xy-container/xy-container.component.ts    | 23 +++++++++
 .../single-container/single-container.svelte  | 26 ++++++++--
 .../xy-container/xy-container.svelte          | 47 ++++++++++++-------
 packages/ts/src/containers.ts                 |  4 +-
 .../src/containers/single-container/config.ts |  9 ++++
 .../src/containers/single-container/index.ts  |  9 +++-
 .../ts/src/containers/xy-container/config.ts  | 10 ++++
 .../ts/src/containers/xy-container/index.ts   | 10 +++-
 .../src/containers/single-container/index.vue | 25 ++++++++--
 .../vue/src/containers/xy-container/index.vue | 25 ++++++++--
 .../docs/containers/Single_Container.mdx      | 38 +++++++++++++++
 .../website/docs/containers/XY_Container.mdx  | 39 +++++++++++++++
 13 files changed, 268 insertions(+), 32 deletions(-)

diff --git a/packages/angular/src/containers/single-container/single-container.component.ts b/packages/angular/src/containers/single-container/single-container.component.ts
index d1ae75398..56d4ef943 100644
--- a/packages/angular/src/containers/single-container/single-container.component.ts
+++ b/packages/angular/src/containers/single-container/single-container.component.ts
@@ -1,7 +1,17 @@
-import { Component, ViewChild, ElementRef, AfterViewInit, Input, OnDestroy, SimpleChanges, ContentChild } from '@angular/core'
+import { Component, ViewChild, ElementRef, AfterViewInit, EventEmitter, Input, OnDestroy, Output, SimpleChanges, ContentChild } from '@angular/core'
 
 // Vis
-import { ColorFunction, ComponentCore, SingleContainer, SingleContainerConfigInterface, Tooltip, Spacing, Annotations, Sizing } from '@unovis/ts'
+import {
+  ColorFunction,
+  ComponentCore,
+  SingleContainer,
+  SingleContainerConfigInterface,
+  SingleContainerRenderPayload,
+  Tooltip,
+  Spacing,
+  Annotations,
+  Sizing,
+} from '@unovis/ts'
 import { VisCoreComponent } from '../../core'
 import { VisTooltipComponent } from '../../components/tooltip/tooltip.component'
 import { VisAnnotationsComponent } from '../../components/annotations/annotations.component'
@@ -54,7 +64,26 @@ export class VisSingleContainerComponent<Data = unknown, C extends ComponentCore
   /** Data to be passed to the component. Default: `undefined`. */
   @Input() data?: Data
 
+  /** Emitted once after the chart's first render completes. */
+  @Output() load = new EventEmitter<SingleContainerRenderPayload>()
+  /** Emitted after every render of the chart, including the first. */
+  @Output() render = new EventEmitter<SingleContainerRenderPayload>()
+  /** Emitted after every render except the first. */
+  @Output() redraw = new EventEmitter<SingleContainerRenderPayload>()
+
   chart: SingleContainer<Data>
+  private _hasLoaded = false
+
+  private _onRenderComplete: SingleContainerConfigInterface<Data>['onRenderComplete'] = (svg, margin, containerWidth, containerHeight, componentWidth, componentHeight) => {
+    const payload: SingleContainerRenderPayload = { svg, margin, containerWidth, containerHeight, componentWidth, componentHeight }
+    this.render.emit(payload)
+    if (this._hasLoaded) {
+      this.redraw.emit(payload)
+    } else {
+      this._hasLoaded = true
+      this.load.emit(payload)
+    }
+  }
 
   ngAfterViewInit (): void {
     this.chart = new SingleContainer<Data>(this.containerRef.nativeElement, this.getConfig(), this.data)
@@ -80,7 +109,7 @@ export class VisSingleContainerComponent<Data = unknown, C extends ComponentCore
     const tooltip = this.tooltipComponent?.component as Tooltip
     const annotations = this.annotationsComponent?.component as Annotations
 
-    return { width, height, duration, margin, component, tooltip, ariaLabel, annotations, svgDefs, sizing, colorFunction }
+    return { width, height, duration, margin, component, tooltip, ariaLabel, annotations, svgDefs, sizing, colorFunction, onRenderComplete: this._onRenderComplete }
   }
 
   ngOnDestroy (): void {
diff --git a/packages/angular/src/containers/xy-container/xy-container.component.ts b/packages/angular/src/containers/xy-container/xy-container.component.ts
index a8c4860a5..81ae0d85f 100644
--- a/packages/angular/src/containers/xy-container/xy-container.component.ts
+++ b/packages/angular/src/containers/xy-container/xy-container.component.ts
@@ -5,8 +5,10 @@ import {
   ContentChild,
   ContentChildren,
   ElementRef,
+  EventEmitter,
   Input,
   OnDestroy,
+  Output,
   QueryList,
   SimpleChanges,
   ViewChild,
@@ -24,6 +26,7 @@ import {
   Tooltip,
   XYContainer,
   XYContainerConfigInterface,
+  XYContainerRenderPayload,
 } from '@unovis/ts'
 import { VisXYComponent } from '../../core'
 import { VisTooltipComponent } from '../../components/tooltip/tooltip.component'
@@ -135,7 +138,26 @@ export class VisXYContainerComponent<Datum> implements AfterViewInit, AfterConte
    * have their individual data. Default: `undefined` */
   @Input() data?: Datum[] | undefined = undefined
 
+  /** Emitted once after the chart's first render completes. */
+  @Output() load = new EventEmitter<XYContainerRenderPayload>()
+  /** Emitted after every render of the chart, including the first. */
+  @Output() render = new EventEmitter<XYContainerRenderPayload>()
+  /** Emitted after every render except the first. */
+  @Output() redraw = new EventEmitter<XYContainerRenderPayload>()
+
   chart: XYContainer<Datum>
+  private _hasLoaded = false
+
+  private _onRenderComplete: XYContainerConfigInterface<Datum>['onRenderComplete'] = (svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight) => {
+    const payload: XYContainerRenderPayload = { svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight }
+    this.render.emit(payload)
+    if (this._hasLoaded) {
+      this.redraw.emit(payload)
+    } else {
+      this._hasLoaded = true
+      this.load.emit(payload)
+    }
+  }
 
   ngAfterViewInit (): void {
     this.chart = new XYContainer<Datum>(this.containerRef.nativeElement, this.getConfig(), this.data)
@@ -207,6 +229,7 @@ export class VisXYContainerComponent<Datum> implements AfterViewInit, AfterConte
       yDirection,
       ariaLabel,
       colorFunction,
+      onRenderComplete: this._onRenderComplete,
     }
   }
 
diff --git a/packages/svelte/src/containers/single-container/single-container.svelte b/packages/svelte/src/containers/single-container/single-container.svelte
index 2c4689208..f17311a1c 100644
--- a/packages/svelte/src/containers/single-container/single-container.svelte
+++ b/packages/svelte/src/containers/single-container/single-container.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { ComponentCore, SingleContainer, SingleContainerConfigInterface, Tooltip, Annotations } from '@unovis/ts'
+  import { ComponentCore, SingleContainer, SingleContainerConfigInterface, SingleContainerRenderPayload, Tooltip, Annotations } from '@unovis/ts'
   import { arePropsEqual } from '../../utils/props'
-  import { onDestroy, setContext } from 'svelte'
+  import { createEventDispatcher, onDestroy, setContext } from 'svelte'
 
   // Generics
   type Data = $$Generic
@@ -9,6 +9,26 @@
     data?: Data;
   }
 
+  const dispatch = createEventDispatcher<{
+    load: SingleContainerRenderPayload;
+    render: SingleContainerRenderPayload;
+    redraw: SingleContainerRenderPayload;
+  }>()
+
+  let hasLoaded = false
+  const handleRenderComplete: SingleContainerConfigInterface<Data>['onRenderComplete'] = (svg, margin, containerWidth, containerHeight, componentWidth, componentHeight) => {
+    const userCallback = $$restProps.onRenderComplete as SingleContainerConfigInterface<Data>['onRenderComplete']
+    userCallback?.(svg, margin, containerWidth, containerHeight, componentWidth, componentHeight)
+    const payload: SingleContainerRenderPayload = { svg, margin, containerWidth, containerHeight, componentWidth, componentHeight }
+    dispatch('render', payload)
+    if (hasLoaded) {
+      dispatch('redraw', payload)
+    } else {
+      hasLoaded = true
+      dispatch('load', payload)
+    }
+  }
+
   // Internal variables
   let chart: SingleContainer<Data> | undefined
   let ref: HTMLDivElement
@@ -36,7 +56,7 @@
   export { className as class }
   let config: SingleContainerConfigInterface<Data>
   $: props = $$restProps as SingleContainerConfigInterface<Data>
-  $: config = { component, tooltip, annotations, ...props }
+  $: config = { component, tooltip, annotations, ...props, onRenderComplete: handleRenderComplete }
 
   // Helpers
   function initChart () {
diff --git a/packages/svelte/src/containers/xy-container/xy-container.svelte b/packages/svelte/src/containers/xy-container/xy-container.svelte
index 52067cbce..ce53b0ad5 100644
--- a/packages/svelte/src/containers/xy-container/xy-container.svelte
+++ b/packages/svelte/src/containers/xy-container/xy-container.svelte
@@ -1,12 +1,32 @@
 <script lang="ts">
-  import { XYContainer, XYComponentCore, XYContainerConfigInterface, Tooltip, Crosshair, Axis, Annotations } from '@unovis/ts'
-  import { onMount, setContext } from 'svelte'
+  import { XYContainer, XYComponentCore, XYContainerConfigInterface, XYContainerRenderPayload, Tooltip, Crosshair, Axis, Annotations } from '@unovis/ts'
+  import { createEventDispatcher, onMount, setContext } from 'svelte'
 
   type Datum = $$Generic
   interface $$Props extends XYContainerConfigInterface<Datum> {
     data?: Datum[];
   }
 
+  const dispatch = createEventDispatcher<{
+    load: XYContainerRenderPayload;
+    render: XYContainerRenderPayload;
+    redraw: XYContainerRenderPayload;
+  }>()
+
+  let hasLoaded = false
+  const handleRenderComplete: XYContainerConfigInterface<Datum>['onRenderComplete'] = (svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight) => {
+    const userCallback = $$restProps.onRenderComplete as XYContainerConfigInterface<Datum>['onRenderComplete']
+    userCallback?.(svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight)
+    const payload: XYContainerRenderPayload = { svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight }
+    dispatch('render', payload)
+    if (hasLoaded) {
+      dispatch('redraw', payload)
+    } else {
+      hasLoaded = true
+      dispatch('load', payload)
+    }
+  }
+
   // Props
   export let data: Datum[] = undefined
   export let className = ''
@@ -40,17 +60,16 @@
   $: chart?.setData(data, true)
 
   let animationFrame = 0
-  const updateContainer = async () => {
-    // due to the order of events when a component is removed update container can be called
-    // while a component is being destroyed. This can lead to an error because we trigger an update
-    // with a destroyed component.
+  const updateContainer = () => {
+    // Filter destroyed components — removal order can leave stale refs that crash on update.
     config.components = config.components?.filter((e) => !e.isDestroyed())
 
-    // we can't use animation frames in a non-browser environment
+    // No rAF in SSR.
     if (typeof requestAnimationFrame === 'undefined') {
       chart?.updateContainer({
         ...config,
         ...($$restProps as XYContainerConfigInterface<Datum>),
+        onRenderComplete: handleRenderComplete,
       })
 
       return
@@ -60,26 +79,22 @@
       cancelAnimationFrame(animationFrame)
     }
 
-    // this prevent multiple renders from happening in a single frame
-    // when a component is first rendered the components will be pushed 1 by 1
-    // so we don't want to rerender every time a component is added
+    // Coalesce sibling component pushes into a single frame.
     animationFrame = requestAnimationFrame(() => {
       chart?.updateContainer({
         ...config,
         ...($$restProps as XYContainerConfigInterface<Datum>),
+        onRenderComplete: handleRenderComplete,
       })
       animationFrame = 0
     })
   }
 
-  $: {
-    config
-    $$restProps
-    updateContainer()
-  }
+  // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-floating-promises
+  $: { config; $$restProps; updateContainer() }
 
   onMount(() => {
-    chart = new XYContainer(ref, config, data)
+    chart = new XYContainer(ref, { ...config, onRenderComplete: handleRenderComplete }, data)
     return () => chart.destroy()
   })
 
diff --git a/packages/ts/src/containers.ts b/packages/ts/src/containers.ts
index d1f5d7f2a..3a9ee21e0 100644
--- a/packages/ts/src/containers.ts
+++ b/packages/ts/src/containers.ts
@@ -1,6 +1,6 @@
 export { ContainerCore } from './core/container'
 export type { ContainerConfigInterface } from './core/container/config'
 export { SingleContainer } from './containers/single-container'
-export type { SingleContainerConfigInterface } from './containers/single-container/config'
+export type { SingleContainerConfigInterface, SingleContainerRenderPayload } from './containers/single-container/config'
 export { XYContainer } from './containers/xy-container'
-export type { XYContainerConfigInterface } from './containers/xy-container/config'
+export type { XYContainerConfigInterface, XYContainerRenderPayload } from './containers/xy-container/config'
diff --git a/packages/ts/src/containers/single-container/config.ts b/packages/ts/src/containers/single-container/config.ts
index b684e0c7b..f64cc68ac 100644
--- a/packages/ts/src/containers/single-container/config.ts
+++ b/packages/ts/src/containers/single-container/config.ts
@@ -7,6 +7,15 @@ import { Annotations } from '@/components/annotations'
 // Types
 import { Spacing } from '@/types/spacing'
 
+export type SingleContainerRenderPayload = {
+  svg: SVGSVGElement;
+  margin: Spacing;
+  containerWidth: number;
+  containerHeight: number;
+  componentWidth: number;
+  componentHeight: number;
+}
+
 export interface SingleContainerConfigInterface<Datum> extends ContainerConfigInterface {
   /** Visualization component. Default: `undefined` */
   component?: ComponentCore<Datum>;
diff --git a/packages/ts/src/containers/single-container/index.ts b/packages/ts/src/containers/single-container/index.ts
index 86ee726d0..910c18e75 100644
--- a/packages/ts/src/containers/single-container/index.ts
+++ b/packages/ts/src/containers/single-container/index.ts
@@ -115,7 +115,14 @@ export class SingleContainer<Data> extends ContainerCore {
     config.annotations?.render(duration)
 
     if (config.tooltip) config.tooltip.update()
-    config.onRenderComplete?.(this.svg.node(), config.margin, this.containerWidth, this.containerHeight, this.width, this.height)
+    config.onRenderComplete?.(
+      this.svg.node(),
+      config.margin,
+      this.containerWidth,
+      this.containerHeight,
+      this.width,
+      this.height
+    )
   }
 
   // Re-defining the `render()` function to handle different sizing techniques (`Sizing.Extend` and `Sizing.FitWidth`)
diff --git a/packages/ts/src/containers/xy-container/config.ts b/packages/ts/src/containers/xy-container/config.ts
index ecd508b60..a7ccb6ed7 100644
--- a/packages/ts/src/containers/xy-container/config.ts
+++ b/packages/ts/src/containers/xy-container/config.ts
@@ -13,6 +13,16 @@ import { ContinuousScale } from '@/types/scale'
 import { Direction } from '@/types/direction'
 import { Spacing } from '@/types/spacing'
 
+export type XYContainerRenderPayload = {
+  svg: SVGSVGElement;
+  margin: Spacing;
+  bleed: Spacing;
+  containerWidth: number;
+  containerHeight: number;
+  componentWidth: number;
+  componentHeight: number;
+}
+
 export interface XYContainerConfigInterface<Datum> extends ContainerConfigInterface {
   /** An array of visualization components. Default: `[]` */
   components?: XYComponentCore<Datum>[];
diff --git a/packages/ts/src/containers/xy-container/index.ts b/packages/ts/src/containers/xy-container/index.ts
index 777fab28e..1b1d2faac 100644
--- a/packages/ts/src/containers/xy-container/index.ts
+++ b/packages/ts/src/containers/xy-container/index.ts
@@ -302,7 +302,15 @@ export class XYContainer<Datum> extends ContainerCore {
     config.annotations?.render()
 
     this._firstRender = false
-    config.onRenderComplete?.(this.svg.node(), margin, this._getBleed(this.components), this.containerWidth, this.containerHeight, this.width, this.height)
+    config.onRenderComplete?.(
+      this.svg.node(),
+      margin,
+      this._getBleed(this.components),
+      this.containerWidth,
+      this.containerHeight,
+      this.width,
+      this.height
+    )
   }
 
   private _updateScales<T extends XYComponentCore<Datum>> (...components: T[]): void {
diff --git a/packages/vue/src/containers/single-container/index.vue b/packages/vue/src/containers/single-container/index.vue
index a23eee15f..a75185460 100644
--- a/packages/vue/src/containers/single-container/index.vue
+++ b/packages/vue/src/containers/single-container/index.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts" generic="T">
-import { SingleContainer, ComponentCore, SingleContainerConfigInterface, Tooltip, Annotations } from '@unovis/ts'
+import { SingleContainer, ComponentCore, SingleContainerConfigInterface, SingleContainerRenderPayload, Tooltip, Annotations } from '@unovis/ts'
 import { onUnmounted, ref, provide, watch, toRefs, watchEffect, reactive, toRaw } from 'vue'
 import { annotationsAccessorKey, componentAccessorKey, tooltipAccessorKey,  } from "../../utils/context"
 import { useForwardProps } from "../../utils/props"
 
 const props = defineProps<SingleContainerConfigInterface<T> & { data?: T }>()
+const emit = defineEmits<{
+  load: [payload: SingleContainerRenderPayload];
+  render: [payload: SingleContainerRenderPayload];
+  redraw: [payload: SingleContainerRenderPayload];
+}>()
+
 const { data } = toRefs(props)
 const parsedProps = useForwardProps(props)
 
@@ -16,17 +22,30 @@ const config = reactive({
 }) as SingleContainerConfigInterface<T>
 const elRef = ref<HTMLDivElement>()
 
+let hasLoaded = false
+const handleRenderComplete: SingleContainerConfigInterface<T>['onRenderComplete'] = (svg, margin, containerWidth, containerHeight, componentWidth, componentHeight) => {
+  parsedProps.value.onRenderComplete?.(svg, margin, containerWidth, containerHeight, componentWidth, componentHeight)
+  const payload: SingleContainerRenderPayload = { svg, margin, containerWidth, containerHeight, componentWidth, componentHeight }
+  emit('render', payload)
+  if (hasLoaded) {
+    emit('redraw', payload)
+  } else {
+    hasLoaded = true
+    emit('load', payload)
+  }
+}
+
 const initChart = () => {
   if (chart) return
   if (elRef.value && config.component)
-    chart = new SingleContainer(elRef.value, { ...toRaw(config) }, data.value)
+    chart = new SingleContainer(elRef.value, { ...toRaw(config), onRenderComplete: handleRenderComplete }, data.value)
 }
 
 watchEffect(() => {
   initChart()
   // watch deep changes in components config
   const t = config.component?.config
-  chart?.updateContainer({ ...toRaw(parsedProps.value), ...toRaw(config) })
+  chart?.updateContainer({ ...toRaw(parsedProps.value), ...toRaw(config), onRenderComplete: handleRenderComplete })
 })
 
 watch(data, () => {
diff --git a/packages/vue/src/containers/xy-container/index.vue b/packages/vue/src/containers/xy-container/index.vue
index 1a1ebbd20..47157cbfa 100644
--- a/packages/vue/src/containers/xy-container/index.vue
+++ b/packages/vue/src/containers/xy-container/index.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts" generic="T">
-import { XYContainer, XYComponentCore, XYContainerConfigInterface, Tooltip, Crosshair, Axis, Annotations } from '@unovis/ts'
+import { XYContainer, XYComponentCore, XYContainerConfigInterface, XYContainerRenderPayload, Tooltip, Crosshair, Axis, Annotations } from '@unovis/ts'
 import { onUnmounted, ref, provide, watch, toRefs, reactive, watchEffect, toRaw } from 'vue'
 import { componentAccessorKey, tooltipAccessorKey, axisAccessorKey, crosshairAccessorKey, annotationsAccessorKey } from "../../utils/context"
 import { useForwardProps } from "../../utils/props"
 
 const props = defineProps<XYContainerConfigInterface<T> & { data?: T[] }>()
+const emit = defineEmits<{
+  load: [payload: XYContainerRenderPayload];
+  render: [payload: XYContainerRenderPayload];
+  redraw: [payload: XYContainerRenderPayload];
+}>()
+
 const { data } = toRefs(props)
 const parsedProps = useForwardProps(props)
 
@@ -19,19 +25,32 @@ const config = reactive({
 }) as XYContainerConfigInterface<T>
 const elRef = ref<HTMLDivElement>()
 
+let hasLoaded = false
+const handleRenderComplete: XYContainerConfigInterface<T>['onRenderComplete'] = (svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight) => {
+  parsedProps.value.onRenderComplete?.(svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight)
+  const payload: XYContainerRenderPayload = { svg, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight }
+  emit('render', payload)
+  if (hasLoaded) {
+    emit('redraw', payload)
+  } else {
+    hasLoaded = true
+    emit('load', payload)
+  }
+}
+
 const initChart = () => {
   if (chart.value || !elRef.value) return
   // config holds only child-registration slots — if all are empty, no slot has registered yet
   const hasContent = Object.values(config).some(v => Array.isArray(v) ? v.length : v)
   if (!hasContent) return
-  chart.value = new XYContainer(elRef.value, { ...toRaw(config) }, data.value)
+  chart.value = new XYContainer(elRef.value, { ...toRaw(config), onRenderComplete: handleRenderComplete }, data.value)
 }
 
 watchEffect(() => {
   initChart()
   // touch deep changes in components config to track them
   const t = config.components.map(i => i.config)
-  chart.value?.updateContainer({ ...toRaw(parsedProps.value), ...toRaw(config) })
+  chart.value?.updateContainer({ ...toRaw(parsedProps.value), ...toRaw(config), onRenderComplete: handleRenderComplete })
 })
 
 watch(data, () => {
diff --git a/packages/website/docs/containers/Single_Container.mdx b/packages/website/docs/containers/Single_Container.mdx
index 880cdfe54..7cbaf013d 100644
--- a/packages/website/docs/containers/Single_Container.mdx
+++ b/packages/website/docs/containers/Single_Container.mdx
@@ -210,5 +210,43 @@ _ChordDiagram_ all accept a `pattern` accessor, and the `theme-patterns` class a
 automatically. See [Patterns](/docs/guides/theming#patterns) in the _Theming_ guide.
 :::
 
+## Events
+The Vue, Svelte, and Angular wrappers emit lifecycle events whenever the chart renders.
+The payload is the same `SingleContainerRenderPayload` for all three:
+
+```ts
+type SingleContainerRenderPayload = {
+  svg: SVGSVGElement;
+  margin: Spacing;
+  containerWidth: number;
+  containerHeight: number;
+  componentWidth: number;
+  componentHeight: number;
+}
+```
+
+| Event    | When it fires                                       |
+| -------- | --------------------------------------------------- |
+| `load`   | Once, after the chart's first render completes.     |
+| `render` | After every render, including the first.            |
+| `redraw` | After every render except the first.                |
+
+```vue
+<!-- Vue -->
+<VisSingleContainer :data @load="onLoad" @render="onRender" @redraw="onRedraw" />
+```
+
+```svelte
+<!-- Svelte -->
+<VisSingleContainer {data} on:load={onLoad} on:render={onRender} on:redraw={onRedraw} />
+```
+
+```html
+<!-- Angular -->
+<vis-single-container [data]="data" (load)="onLoad($event)" (render)="onRender($event)" (redraw)="onRedraw($event)" />
+```
+
+For React and Solid, use the `onRenderComplete` config callback. It receives the same fields as positional args: `(svgNode, margin, containerWidth, containerHeight, componentWidth, componentHeight)`.
+
 ## Component Props
 <PropsTable name="VisSingleContainer"/>
diff --git a/packages/website/docs/containers/XY_Container.mdx b/packages/website/docs/containers/XY_Container.mdx
index b7773ec48..43759ddae 100644
--- a/packages/website/docs/containers/XY_Container.mdx
+++ b/packages/website/docs/containers/XY_Container.mdx
@@ -365,5 +365,44 @@ For ready-made stripe, dot, and hatch fills you don't need custom defs — use a
 or the `theme-patterns` class. See [Patterns](/docs/guides/theming#patterns) in the _Theming_ guide.
 :::
 
+## Events
+The Vue, Svelte, and Angular wrappers emit lifecycle events whenever the chart renders.
+The payload is the same `XYContainerRenderPayload` for all three:
+
+```ts
+type XYContainerRenderPayload = {
+  svg: SVGSVGElement;
+  margin: Spacing;
+  bleed: Spacing;
+  containerWidth: number;
+  containerHeight: number;
+  componentWidth: number;
+  componentHeight: number;
+}
+```
+
+| Event    | When it fires                                       |
+| -------- | --------------------------------------------------- |
+| `load`   | Once, after the chart's first render completes.     |
+| `render` | After every render, including the first.            |
+| `redraw` | After every render except the first.                |
+
+```vue
+<!-- Vue -->
+<VisXYContainer :data @load="onLoad" @render="onRender" @redraw="onRedraw" />
+```
+
+```svelte
+<!-- Svelte -->
+<VisXYContainer {data} on:load={onLoad} on:render={onRender} on:redraw={onRedraw} />
+```
+
+```html
+<!-- Angular -->
+<vis-xy-container [data]="data" (load)="onLoad($event)" (render)="onRender($event)" (redraw)="onRedraw($event)" />
+```
+
+For React and Solid, use the `onRenderComplete` config callback. It receives the same fields as positional args: `(svgNode, margin, bleed, containerWidth, containerHeight, componentWidth, componentHeight)`.
+
 ## Component Props
 <PropsTable name="VisXYContainer"/>

From e3b15c171d06beb3abfd184e199f50b2a454b1d4 Mon Sep 17 00:00:00 2001
From: Soryn <soryngitlan@gmail.com>
Date: Fri, 3 Jul 2026 11:02:07 +0300
Subject: [PATCH 2/2] Component | TopoJSONMap | Treemap: Remove unused imports

---
 packages/ts/src/components/topojson-map/utils.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/ts/src/components/topojson-map/utils.ts b/packages/ts/src/components/topojson-map/utils.ts
index 652d58d7b..e564fa928 100644
--- a/packages/ts/src/components/topojson-map/utils.ts
+++ b/packages/ts/src/components/topojson-map/utils.ts
@@ -15,9 +15,6 @@ import { NumericAccessor, ColorAccessor } from '@/types/accessor'
 import { Rect } from '@/types/misc'
 import { GenericDataRecord } from '@/types/data'
 
-// Styles
-import * as s from './style'
-
 // Local Types
 import {
   AreaLabelDatum,