bklit-studio-chart-performance

Optimize Bklit Studio chart performance by memoizing components and splitting contexts.

1.5k|89|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/bklit/bklit-ui --skill bklit-studio-chart-performance
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bklit-studio-chart-performance
Source: https://github.com/bklit/bklit-ui/tree/main/.agents/skills/bklit-studio-chart-performance
Command: npx skills add https://github.com/bklit/bklit-ui --skill bklit-studio-chart-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the issue of charts feeling sluggish in the Bklit Studio editor (experiencing lag during pan operations, slider tick updates, or legend hover interactions) even when similar chart types like the pie chart perform smoothly.

Core Features & Use Cases

  • Structured Performance Audit Workflow: Step-by-step guidance to identify root causes of chart lag, including re-render tracing, expensive animation detection, and context memoization checks.
  • Proven Optimization Patterns: Pre-vetted solutions for common Studio chart performance issues, such as splitting stable and hover contexts, isolating enter animations, and adding memo boundaries for preview components.
  • Cross-Chart Compatibility: Applies to all chart types rendered in Studio, including Sankey, radar, funnel, and cartesian charts, with reference implementations from high-performing chart types like pie and ring.
  • Use Case: If your Sankey chart drops FPS during canvas pan while the pie chart runs at 60fps, use this Skill to apply the checklist and align your chart's performance to the reference baseline.

Quick Start

Use the bklit-studio-chart-performance skill to audit and fix the sluggish performance of your Studio chart by following the provided optimization checklist.

Frequently Asked Questions about bklit-studio-chart-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does my Sankey chart lag in the Studio editor while the pie chart runs at 60fps?

Chart lag during Studio interactions occurs when unmemoized context values, expensive SVG path animations, and unnecessary re-renders fail to isolate enter animations and split stable versus hover contexts.

How do I fix sluggish chart performance during canvas pan and slider adjustments?

Fix sluggish chart performance by applying context splitting, isolating enter animations, cleaning up motion subscriptions, and adding memo boundaries for preview components to match the reference FPS baseline.

What causes unnecessary re-renders in React chart components during legend hover?

Unnecessary re-renders during legend hover are caused by unmemoized context values that update globally, failing to isolate hover state from sibling chart components and triggering expensive SVG path recalculations.

Does this chart optimization approach work for all chart types in the Bklit Studio interface?

Yes, the optimization patterns apply to all chart components rendered in the /studio interface, including pie, ring, Sankey, radar, funnel, and cartesian charts experiencing lag during interactive operations.

What is context splitting for React chart performance and when do I need it?

Context splitting separates stable chart data contexts from volatile hover contexts to prevent unnecessary re-renders, needed when interactive operations like pan or legend hover cause frame rate drops in Studio charts.

How to audit and optimize SVG path animations slowing down interactive chart rendering?

Audit SVG path animations by tracing expensive re-renders, detecting costly animation recalculations, and isolating enter animations so interactive updates do not trigger full chart component re-renders.