# Build a Charting Component: D3, Recharts, and Visx

Source: https://www.techinterview.org/post/3233475188/build-charting-component-d3-recharts/
Updated: 2026-05-05 · techinterview.org

Charting is one of the more demanding frontend specialties — combining data visualization theory, SVG performance, accessibility, and the ergonomic challenge of building reusable chart components. The interview tests whether you understand the library landscape and the engineering tradeoffs.

## The library landscape (2026)

### D3.js

The original. Imperative API, full control, steep learning curve. Best for: bespoke visualizations, complex animations, interview-portfolio pieces.

Cons: imperative DOM manipulation conflicts with React; lots of boilerplate.

### Recharts

React component-based on top of D3. Best for: standard charts (line, bar, pie, scatter) with customization. Most-used for typical dashboards.

Cons: less flexible for non-standard chart types.

### Visx

Airbnb's low-level visualization library. React + D3 primitives without forcing the chart shape. Best for: bespoke charts where Recharts is too rigid but D3 is too imperative.

### Apache ECharts

Mature, performant, broad chart catalog. Canvas-based for performance with thousands of points. Best for: dashboards with diverse chart types.

### Plotly

Scientific charts, 3D, mature. Best for: data science use cases.

### Observable Plot

Higher-level than D3, designed for grammar-of-graphics style. Newer; less popular but ergonomic.

## SVG vs Canvas

- **SVG:** declarative, accessible, easy CSS styling, slow above ~10K nodes

- **Canvas:** imperative, fast (100K+ points), harder to make accessible

- **WebGL:** for 1M+ points; scientific computing, real-time visualization

Most production charts use SVG below 5K data points; Canvas above.

## Accessibility

Charts are notoriously inaccessible. Patterns:

- Provide a data table alternative for screen readers

- aria-labels for individual chart elements

- Text descriptions of trends ("revenue increased 15% over the period")

- Keyboard navigation for interactive charts

Highcharts has the most-mature accessibility module among chart libraries.

## Performance with many points

For real-time charts with thousands of points:

- Downsample for visual rendering (LTTB algorithm)

- Virtualize the time axis (only render visible window)

- Use Canvas instead of SVG

- Throttle updates (60fps max; often 10-30fps is fine)

## Common chart types

- Line: time series, continuous data

- Bar: categorical comparisons

- Stacked bar: composition

- Pie / donut: parts of a whole (5–7 categories max)

- Scatter: relationships

- Heatmap: dense 2D data

- Sankey: flow / hierarchy

- Treemap: hierarchical proportions

## Tooltip patterns

Hover/tap on a data point shows a tooltip. Implementation:

- Track mouse position via React state

- Find nearest data point

- Position tooltip with viewport-edge handling

- Use PortalUtil to escape parent overflow

For touch devices, tap-and-hold or scrub-along-axis.

## Animation

Animated charts can communicate change:

- Initial fill-in animation (line draws from left to right)

- Update animation (data point shifts smoothly)

- Don't over-animate — too much distracts

## Responsive sizing

Charts need to fit their container:

- ResponsiveContainer in Recharts

- ResizeObserver for custom solutions

- Recompute layout when container resizes

## Common mistakes

- D3 inside React without proper integration (DOM conflicts)

- SVG with 50K+ nodes (browser dies)

- No accessibility

- Tooltip flicker on edge cases

- Wrong axis types (linear when time is needed)

## Frequently Asked Questions

### Recharts or Visx?

Recharts for standard charts; Visx when you need flexibility. Don't reach for D3 directly unless you have unique requirements.

### How do I render 100K data points?

Downsample for visual; let user drill into full resolution on demand. Canvas-based libraries (ECharts) handle this natively.

### Is D3 still worth learning?

For deep visualization expertise, yes. For most frontend roles, knowledge of higher-level libraries is sufficient.