Data Visualization & Charts (Recharts, D3, Chart.js)

The big picture (read this first). Every chart is the same idea: take numbers in data space (dollars, dates, counts) and map them to pixel space (x/y positions, heights, colors) inside a drawing surface. Three decisions define any charting solution: (1) what surface do you draw on — SVG or Canvas; (2) how do you map data to pixels — the scale abstraction; and (3) how much of that do you write yourself vs. let a library do. Understanding these three lets you reason about any charting library instead of memorizing APIs.

SVG vs Canvas — the foundational choice. SVG is retained-mode: every bar, line, and label is a real DOM element you can style with CSS, attach event handlers to, and inspect. That makes SVG great for interactivity, accessibility, and crisp scaling, but it degrades once you have thousands of elements because each is a live DOM node. Canvas is immediate-mode: you issue draw commands to a bitmap and the browser forgets the shapes — there's no DOM, so it renders tens of thousands of points fast, but you lose per-element events, CSS, and built-in accessibility (you rebuild hit-testing yourself). Rule of thumb: SVG for typical dashboards (hundreds of elements, rich interaction), Canvas (or WebGL) for high-density data (large scatter plots, real-time streams).

Scales are the heart of every chart. A scale is a pure function from a data domain to a visual range. A linear scale maps [0, maxValue] -> [chartHeight, 0] (note the flip — SVG's y-axis grows downward, but charts grow upward). A band scale maps discrete categories to evenly spaced slots with padding (bar charts). A time scale maps Date objects to pixels. A color/ordinal scale maps categories to a palette. D3's d3-scale is the canonical implementation, and even when you use Recharts you are configuring scales under the hood. If you internalize domain -> range, you understand charting.

D3 is two libraries in a trench coat. People conflate them, but D3 has a utility half and a DOM half. The utility modules — d3-scale, d3-shape (line/area/arc/pie generators), d3-array, d3-time, d3-format — are pure math with no DOM and pair beautifully with React (let D3 compute path strings and scales; let React render the SVG). The DOM half — d3-selection's enter/update/exit data-join — imperatively creates and mutates elements, which fights React because both want to own the DOM. The modern React-D3 pattern is: D3 for math, React for rendering; reach for d3-selection only for complex transitions React can't easily express.

Recharts — declarative React charting. Recharts composes a chart from JSX components: a container chart (<BarChart>, <LineChart>, <PieChart>), axes (<XAxis>, <YAxis>), decorations (<Tooltip>, <Legend>, <CartesianGrid>), and data series (<Bar>, <Line>, <Area>, <Pie>) that each bind to a field via dataKey. It renders SVG under the hood and reads like markup that mirrors your data shape. Wrapping in <ResponsiveContainer> makes the chart fluidly fill its parent width at a fixed height with no resize code. It's the right default for standard React charts because it's declarative and integrates cleanly with component state.

Chart.js — Canvas-based, config-driven. Chart.js draws to a <canvas> from a single config object (type, data, options). Because it's Canvas, it handles denser datasets than SVG libraries and has a small, batteries-included feature set (animations, tooltips, legends). The trade is Canvas's: no DOM per element, so styling and accessibility are more limited and you configure rather than compose. Its React wrapper (react-chartjs-2) just marshals props into that config. Reach for it when you want a solid, dense, standard chart with minimal ceremony.

Picking the tool (the matrix).

Match the tool to the need rather than defaulting to the most powerful one — D3 for everything is a common over-engineering mistake.

Accessibility is where most charts fail. A chart that only conveys meaning through color and pixels is invisible to screen-reader users and hostile to the color-blind. The fixes: give the SVG role="img" and a descriptive aria-label or <title>/<desc>; provide the underlying data as a visually-hidden <table> so assistive tech and keyboard users can read the numbers; never rely on color alone — add patterns, direct labels, or shape encodings and check contrast; ensure interactive points are keyboard-focusable with visible focus. A good chart has a text alternative that stands on its own.

Responsiveness and the retina/DPR trap. SVG scales cleanly because it's vector, but you still need to recompute scales when the container resizes (Recharts' ResponsiveContainer or a ResizeObserver). Canvas has a sharper gotcha: on high-DPR (retina) screens a canvas rendered at CSS pixels looks blurry — you must set the backing store to width * devicePixelRatio, keep the CSS size fixed, and ctx.scale(dpr, dpr). Forgetting DPR is the #1 reason Canvas charts look fuzzy.

Performance and data volume. The failure mode is rendering more than the surface can handle: thousands of SVG nodes janks layout; unthrottled real-time updates blow the frame budget. Mitigations: for SVG, cap element count, aggregate/bin data, and virtualize; for high density switch to Canvas/WebGL; downsample time series (e.g. LTTB) before plotting; throttle streaming updates to one render per animation frame with requestAnimationFrame; and memoize scale computations so you don't recompute them on every render.

Encodings and honesty. Choosing the right chart is half the job: bar for comparing categories, line for trends over time, scatter for correlation, pie only for a few parts of a whole (and rarely — humans read angles poorly). Be honest with axes: truncating a bar chart's y-axis (not starting at zero) exaggerates differences and is a classic misleading-visualization mistake. Line charts may start off zero to show trend detail, but bars must anchor at zero because their length is the encoding.

The mental model (memorise this). A chart maps data space to pixel space through a scale (domain -> range) drawn on a surface (SVG = DOM elements, styleable/interactive/accessible but caps out in the thousands; Canvas = bitmap, dense and fast but no DOM/events/a11y). Use Recharts for standard declarative React charts, D3's utility half for bespoke SVG (math in D3, rendering in React), Chart.js for dense Canvas charts — and always ship a text/table alternative and never encode meaning by color alone.