If you've been living under a rock, the chart library world has quietly evolved. Chart.js is still around (it's imperative, it's slow to configure), but Recharts and Visx changed the game by making charts React components. Velocity X uses Recharts 3 for every dashboard viz: dual-axis revenue + jobs trend, KPI sparklines, channel-mix stacked bars, conversion funnels. It's not the only choice, but it's the one that keeps your code predictable.
Why Declarative Beats Imperative
Chart.js gives you a canvas element and imperative methods: `chart.update()`, `chart.destroy()`, config objects with 40+ keys. You're fighting the library to keep your React state and chart state in sync. Recharts, Tremor, and Visx take a different path: they're composed from React components. Your data flows down props, and the chart rerenders like any other component. State management is native to React—no bridge needed.
Tremor is slick but opinionated: it hides a lot of configuration behind a clean API. Visx is low-level and powerful, but it's more "here's a toolkit" than "here's a chart". Recharts sits in the middle: powerful enough for complex dashboards, sensible defaults for common patterns, and a JSX syntax that feels natural.
The Recharts Patterns Velocity X Relies On
Dual-axis line chart (revenue + job completion): Recharts renders two Y axes and lets you bind different data series to each. The syntax is dead simple—define a second `
{`
`}Sparklines (KPI tiles): A sparkline is a tiny chart with no axes, no grid, no legend—just a line. Recharts lets you render this in 20 lines by stripping out everything except `
{`const Sparkline = ({ data, color = '#10b981' }) => (
);`}Stacked bar (channel mix): Each bar is split into segments—revenue by channel. Recharts handles the stacking automatically; you just render multiple `
When NOT to Use Recharts
Recharts ships at ~60KB (minified, gzipped ~18KB). That's reasonable. Where it stumbles: highly interactive, drill-down dashboards with 200+ data points. The rerender cost balloons fast. If you're building a financial terminal with real-time tick data and millisecond latency, Visx + custom canvas rendering wins. For product dashboards, Recharts is the right speed.
The Verdict
Recharts is the sweet spot for React dashboards. It plays by React rules, the API is predictable, and the patterns scale from a simple line chart to a live SLT dashboard with 6+ synchronized charts. If you're shipping a product that needs dashboards, don't reach for Chart.js. Reach for Recharts—or if you need precision control, Visx. The declarative future is here. See Velocity's dashboard architecture in action.