Studio chart performance

Use when a chart feels sluggish in Studio but similar charts (e.g. pie-chart) are fine.

One-line rule

Keep enter animation on paths if you need it, then drop Motion path subscriptions and isolate hover so Studio slider and legend updates don't replay expensive arc/path math across every series every frame.

1. Find what re-renders on every interaction

Studio updates

displayState

on every slider tick and on legend/slice hover. Trace:

Does hover live in the same context as data, scales, and animation config?
Does the preview recreate children (
```
data.map
```
, pattern defs, motion props) every render?
Does the chart remount unnecessarily (
```
key
```
tied to motion signature vs manual replay)?

Pattern: Split context like cartesian / pie charts — stable slice (data, geometry, animation config) vs hover slice (

hoveredIndex

, tooltip). Consumers that don't need hover use only the stable hook (

usePieStable

useRingStable

useChartStable

, …).

Studio pan: Wrap chart render in

StudioChartRender

(

packages/studio/src/components/studio-chart-render.tsx

) so camera pan / FPS counter parent updates skip the chart tree when render props are unchanged.

2. Treat SVG path

animation as expensive

Animating

with Motion /

useTransform

+ d3 arc (or similar) runs layout + paint every frame, per series.

Prefer	Avoid
`transform` / `opacity` for hover (compositor-friendly)	Continuous `d` morphing after enter is done
Static `d` once enter finishes	Keeping Motion subscriptions on `d` for the chart's lifetime
Enter animation only, then static paths	Re-running enter path math on unrelated prop changes

Pattern:

useMountProgress

for enter → when progress ≥ 1 (

useEnterComplete

), render static paths and only animate hover with

opacity

scale

on a motion.g
wrapper (not per-path

scale

motion.path

Shared hook:

packages/ui/src/charts/use-enter-complete.ts

3. Memoize chart shell context

Unmemoized provider values force all children to reconcile on every parent render.

Memoize the stable context object with explicit deps (data, arcs/radii, dimensions, callbacks).
Memoize hover context on
```
hoveredIndex
```
+ stable
```
setHoveredIndex
```
(
```
useCallback
```
in chart shell).
Match isLoaded
to ring/cartesian:
```
useEffect
```
+ timeout, not a lazy
```
useState
```
initializer.

Reference:

pie-context.tsx

ring-context.tsx

chart-context.tsx

PieChartCore

RingChartCore

useMemo

on provider value.

4. Studio preview–specific wins

Chart-agnostic; apply in

packages/studio/src/components/charts/*-studio*.tsx

Win	How
Conditional defs	Only pass `patternDefs` / gradients when a series uses patterns
Memo derived data	Colored/mapped data arrays; slice/series lists ( `useMemo` , deps: `dataSeed` + design fields that affect color)
Memo motion enter	Don't call `getStudioMotionEnterProps` inline; `useMemo` with motion-only deps (not full `state` )
Memo legend hover	`{ hoveredIndex, setHoveredIndex }` in `useMemo` — already in `studio-legend-hover.tsx`
Memo chart body	`memo()` wrapper; pass primitives ( `chartKey` , `chartSize` , `data` ) not whole `ctx` so pan/shell re-renders skip rebuild
Disable glow in Studio	`showGlow={false}` on series components

Reference:

pie-studio-preview.tsx

ring-studio-preview.tsx

5. Compare against a “fast” sibling in Studio

Diff the slow chart against one that feels smooth in the same editor (usually pie-chart):

Check	Slow chart often has	Fast chart often has
Shell	Inline render, extra defs	`StudioChartShell` + conditional patterns
Series count	Many animated paths	Fewer paths or simpler geometry
Hover	Context + full tree re-render	Stable subscribers; hover on `motion.g` / translate
Enter	Path `d` wipe per series	Static `d` after enter; transform-only hover
Pan	Chart tree rebuilds every frame	`StudioChartRender` memo boundary

6. Validation bar

Before opening a PR:

bash

pnpm lint
pnpm --filter @bklitui/ui check-types
pnpm --filter @bklitui/studio check-types
# scoped production build when touching studio/web

Manual

/studio?chart=<slug>

Enter animation
Hover / legend sync
Drag geometry sliders (no unnecessary remount)
Canvas pan (space + drag) after enter — FPS near pie-chart baseline
Pattern/gradient mode if supported

Chart status (bklit-ui)

Chart	Slug	Status
Pie	`pie-chart`	✅ Reference (#120)
Ring	`ring-chart`	✅ Aligned to checklist (context split, static paths, `StudioChartRender` , preview memo)
Radar / Funnel / Choropleth	various	Partial — run checklist
Cartesian / scatter / live-line	various	✅ #91 decimation + hover batching
Sankey	`sankey-chart`	`useTransform` on link stroke — candidate for `useEnterComplete`
Gauge	`gauge-chart`	Low priority (single arc)

Key files

Area	Path
Enter-complete hook	`packages/ui/src/charts/use-enter-complete.ts`
Pie reference	`packages/ui/src/charts/pie-slice.tsx` , `pie-context.tsx` , `pie-studio-preview.tsx`
Ring	`packages/ui/src/charts/ring.tsx` , `ring-chart.tsx` , `ring-studio-preview.tsx`
Pan isolation	`packages/studio/src/components/studio-chart-render.tsx`
Registry	`packages/studio/src/lib/registry.tsx`

bklit-studio-chart-performance

NPX Install

Tags

SKILL.md Content

Studio chart performance

One-line rule

1. Find what re-renders on every interaction

2. Treat SVG path
`d`
animation as expensive

3. Memoize chart shell context

4. Studio preview–specific wins

5. Compare against a “fast” sibling in Studio

6. Validation bar

Chart status (bklit-ui)

Key files

bklit-studio-chart-performance

NPX Install

Tags

SKILL.md Content

Studio chart performance

One-line rule

1. Find what re-renders on every interaction

2. Treat SVG path d animation as expensive

3. Memoize chart shell context

4. Studio preview–specific wins

5. Compare against a “fast” sibling in Studio

6. Validation bar

Chart status (bklit-ui)

Key files

2. Treat SVG path
`d`
animation as expensive