How We Built Our Analytics Dashboard with Recharts

When we set out to build the analytics dashboard for Velocity, we needed a charting library that was flexible, composable, and worked seamlessly with React Server Components in Next.js 15. After evaluating several options, we chose Recharts for its declarative API, strong TypeScript support, and vibrant ecosystem.

Our dashboard visualizes four key metrics: burndown (remaining issue count over time), velocity (completed issues per sprint), lead time (avg/median/p95 time to close), and throughput (issues closed per day). Each metric required a different chart type: line chart for burndown, bar chart for velocity, stat cards for lead time, and area chart for throughput. Recharts made it trivial to mix and match primitives like <LineChart>, <BarChart>, and <AreaChart> while sharing common axes, tooltips, and legends.

The data pipeline was the real challenge. We wrote GraphQL resolvers that aggregate issue state transitions from our issue_history table, computing daily snapshots for burndown, grouping by sprint for velocity, and calculating percentiles for lead time using PostgreSQL window functions. The resolvers accept date range and filter parameters (team, project) and return time-series data ready for charting.

On the client side, we built a date range picker (7d/30d/90d presets plus custom ranges) and team/project filter dropdowns that update URL search params. The page component reads these params, fetches data via Apollo, and passes it to chart components. Recharts handles responsive sizing automatically, and we added custom tooltips with Tailwind styling to match our design system.

One gotcha: Recharts requires numeric or Date x-axis values, but our API returns ISO date strings. We wrote a simple parseISO() transform using date-fns to convert strings to Date objects before passing to <XAxis>. This kept the chart rendering smooth and avoided cryptic "invalid domain" errors.

The result is a dashboard that loads in under 500ms and provides actionable insights at a glance. Recharts proved to be the right choice for our needs: it's performant, composable, and pairs beautifully with React 19's concurrent features. If you're building data visualizations in Next.js, we highly recommend giving it a try.