← Back to Articles
2024-04-03frontend

Recharts consolidation with brush and zoom

  • Change: Charts refactored with Recharts as the primary library (955971be "wip: adding recharts with brush & zoom"). Brush + zoom behavior extracted into a custom hook (97fa25db). Global chart components consolidated under src/components/local/change/ (ef023d24 "consolidating global charts").
  • Why: Chart.js required manual DOM manipulation for brush interactions, which fought React's rendering model. Recharts' declarative <Brush> + <ReferenceArea> components made zoom-select work without imperative refs or direct canvas access.
  • Affected Modules: src/components/local/change/, chart hooks in src/lib/data/chart/
  • Trade-offs:
    • Pro: Brush/zoom behavior is now a reusable hook; chart components are declarative and easier to diff.
    • Con: Chart.js and Nivo are still present for specific chart types (histograms, bar variants); this was a consolidation, not a full migration — two chart APIs still coexist.