Skip to main content

At most one charting library

ab-000236 · ai-slop-code-drift.convention-drift.dual-charting-library
Severity: infoactive

Why it matters

Two charting libraries means two SVG-rendering approaches, two theming systems, and two tooltip conventions. Recharts' composable React pattern sits next to Chart.js's imperative canvas API and the resulting charts look and behave like they came from different products. Bundle size grows by 50 to 200 KB for the redundant library, which matters on mobile and on dashboard-heavy pages where Core Web Vitals already hover near Lighthouse thresholds.

Severity rationale

Info because charting drift is bundle weight and visual inconsistency, not correctness or security.

Remediation

Pick one library and rewrite every chart. Inventory with grep -rl "from 'recharts'" src/components/ and the Chart.js equivalent, then consolidate chart components under src/components/charts/ so shared theming lives in one place.

# After every import points to the survivor:
npm uninstall recharts

Centralize color palette, axis defaults, and tooltip styling in src/components/charts/theme.ts so every future chart inherits the system automatically.

Detection

  • ID: ai-slop-code-drift.convention-drift.dual-charting-library

  • Severity: info

  • What to look for: Apply the three-condition rule against this exact charting library allowlist: recharts, chart.js, react-chartjs-2, victory, @nivo/core, d3, apexcharts, react-apexcharts, echarts, echarts-for-react, visx, @visx/visx, @tremor/react. Count all package names found.

  • Pass criteria: 0 or 1 charting libraries from the allowlist actively used. Report even on pass: "Canonical charting library: [name or 'none'] ([N] importing files)."

  • Fail criteria: 2 or more charting libraries from the allowlist meet all three conditions (at least 1 non-escape-hatch importing file).

  • Skip (N/A) when: 0 charting libraries from the allowlist appear in RUNTIME_DEPS.

  • Detail on fail: "2 active charting libraries: 'recharts' (3 files) AND 'chart.js' (3 files). Pick one for visual consistency and bundle savings."

  • Remediation: Two charting libraries means inconsistent visual styling and bundle bloat. Pick one and convert each chart to it:

    # Inventory each library's usage
grep -rl "from 'recharts'" src/components/
grep -rl "from 'chart.js'" src/components/

# Convert the smaller side to the larger one
npm uninstall recharts

Taxons

dependency-coherence

History