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.