Charting & Data Visualization

Recharts (React — recommended)

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, PieChart, Pie, Cell, } from 'recharts';

const data = [ { month: 'Jan', revenue: 4000, users: 240 }, { month: 'Feb', revenue: 3000, users: 198 }, { month: 'Mar', revenue: 5000, users: 300 }, ];

function RevenueChart() { return ( <ResponsiveContainer width="100%" height={300}> <LineChart data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="month" /> <YAxis /> <Tooltip /> <Line type="monotone" dataKey="revenue" stroke="#8884d8" strokeWidth={2} /> <Line type="monotone" dataKey="users" stroke="#82ca9d" strokeWidth={2} /> </LineChart> </ResponsiveContainer> ); }

// Bar Chart function SalesChart() { return ( <ResponsiveContainer width="100%" height={300}> <BarChart data={data}> <CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="month" /> <YAxis /> <Tooltip /> <Bar dataKey="revenue" fill="#8884d8" radius={[4, 4, 0, 0]} /> </BarChart> </ResponsiveContainer> ); }

Chart.js (framework-agnostic)

import { Chart, registerables } from 'chart.js'; Chart.register(...registerables);

// With React wrapper import { Line, Bar, Doughnut } from 'react-chartjs-2';

function SalesChart() { return ( <Line data={{ labels: ['Jan', 'Feb', 'Mar'], datasets: [{ label: 'Revenue', data: [4000, 3000, 5000], borderColor: '#8884d8', tension: 0.3, }], }} options={{ responsive: true, plugins: { legend: { position: 'top' } }, scales: { y: { beginAtZero: true } }, }} /> ); }

D3.js (low-level, maximum control)

import * as d3 from 'd3';

function createBarChart(container: HTMLElement, data: { label: string; value: number }[]) { const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const width = 600 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom;

const svg = d3.select(container).append('svg') .attr('viewBox', 0 0 ${width + margin.left + margin.right} ${height + margin.top + margin.bottom}) .append('g').attr('transform', translate(${margin.left},${margin.top}));

const x = d3.scaleBand().domain(data.map((d) => d.label)).range([0, width]).padding(0.2); const y = d3.scaleLinear().domain([0, d3.max(data, (d) => d.value)!]).range([height, 0]);

svg.append('g').attr('transform', translate(0,${height})).call(d3.axisBottom(x)); svg.append('g').call(d3.axisLeft(y));

svg.selectAll('rect').data(data).join('rect') .attr('x', (d) => x(d.label)!) .attr('y', (d) => y(d.value)) .attr('width', x.bandwidth()) .attr('height', (d) => height - y(d.value)) .attr('fill', '#8884d8') .attr('rx', 4); }

Library Selection

Library Best For Learning Curve

Recharts React dashboards Low

Chart.js Simple charts, any framework Low

D3.js Custom/complex visualizations High

ECharts Large datasets, maps Medium

Nivo React, rich chart types Low

Anti-Patterns

Anti-Pattern Fix

Not using ResponsiveContainer Always wrap charts for responsive sizing

Re-rendering entire chart on data change Use chart update methods, not re-mount

Too many data points without aggregation Aggregate/sample data before charting

No loading state for async data Show skeleton/spinner while loading

Fixed pixel dimensions Use relative sizing (%, viewBox)

Production Checklist

• Responsive container wrapping all charts

• Loading and empty states handled

• Accessible: color contrast, ARIA labels

• Data aggregation for large datasets

• Consistent color palette across charts

• Tooltip formatting for readability