Chart library integration

Chart Library Integration

Use this skill when building or extending charts using the project's established charting library or selecting a library when none exists yet.

Adapt to the Project's Ecosystem First

1. Inspect Existing Dependencies Before Introducing a New Library:
   • Check package.json and existing dashboard components first. Do not bundle a second heavy charting library alongside an existing one without clear architectural justification.
   • Apply library-specific best practices:
     • Apache ECharts: Use tree-shakable modular imports (echarts/core, specific chart/component modules), bind ResizeObserver to chart.resize(), call chart.dispose() on unmount, and use dataset + dataZoom cleanly.
     • Recharts / Visx: Memoize data arrays and custom tooltip/tick components so parent state updates do not trigger full SVG re-mounts; disable initial mount animations when updating high-frequency live data.
     • Chart.js: Register only required controllers/scales/plugins (Chart.register(...)), provide explicit container aspect-ratio/height wrappers so resize loops cannot occur, and destroy instances on unmount.
     • Observable Plot / Vega-Lite: Use declarative mark composition and explicit scale/channel definitions with responsive width bindings.

Design System Token & Theme Alignment

• Bind Colors, Typography, and Spacing to Design Tokens:
  • Coordinate with the design system and UI/UX designer so chart axes, gridlines, tooltip surfaces, font families, and categorical/sequential/diverging palettes pull from semantic theme tokens (supporting both light and dark modes).
  • Keep gridlines subtle and non-competing (low-opacity neutral stroke) so data marks carry the highest visual prominence (Tufte's data-ink ratio).
• Consistent Number, Currency & Date Formatting:
  • Format axis ticks with compact notation ($1.2M, 45k) while showing exact formatted values ($1,245,890.00) in tooltips and tables using locale-aware Intl.NumberFormat and Intl.DateTimeFormat.

Checklist

• Does the implementation reuse the project's existing charting library and tree-shake unused modules?
• Are chart instances, event listeners, and ResizeObserver hooks properly disposed on unmount?
• Do colors, fonts, gridlines, and tooltips adapt cleanly to the project's light and dark design tokens?
• Do axis ticks use concise locale-aware formatting while tooltips and tables expose exact values?