What is the difference between Recharts, D3.js, and a BI tool for data visualisation?
Recharts (and similar libraries Nivo, Victory, Chart.js) are React component libraries they provide pre-built chart types (bar, line, area, scatter) as composable React components that consume data via props. They are the right choice for standard business charts in React applications fast to implement, well-documented, and maintained. D3.js is a low-level data visualisation library it binds data to SVG elements and provides the building blocks (scales, axes, layouts) to construct any possible visualisation. Use D3 when no pre-built chart library has the chart type you need (network graphs, Sankey diagrams, custom geospatial charts, animated data stories). BI tools (Metabase, Looker, Tableau) are drag-and-drop tools for non-developers they are fast for standard charts but cannot produce custom interactive chart experiences or integrate deeply with a React product's design system. ClickMasters uses Recharts/Nivo for product-embedded standard charts, D3.js for custom chart types, and BI tools for internal analytics.
When should I use canvas rendering vs SVG for charts?
SVG (Scalable Vector Graphics) is the default for most charts: each element is a DOM node (hoverable, interactive, accessible, easy to style with CSS), renders sharply at any resolution, and is the output format of D3.js and most React chart libraries. Use canvas rendering when: the chart has more than 10,000-50,000 data points (SVG performance degrades significantly each data point is a DOM node, and 100,000 DOM nodes make the browser sluggish), real-time updates at 60fps are required (canvas redraws are faster than DOM mutations), or WebGL rendering is needed for 3D or GPU-accelerated visualisation (Deck.gl uses WebGL for millions-of-points geospatial visualisations). ECharts (Apache) and Vega-Lite support automatic switching between SVG and canvas based on data size. ClickMasters uses SVG for standard business charts and canvas/WebGL for high-volume or high-performance visualisation requirements.
Can I export charts from my React dashboard to PDF or image?
Yes. Chart export from React dashboards uses html2canvas (captures a React component including its styled contents as an HTML5 canvas element, then exports to PNG or JPEG) for screenshot-style exports, and SVG export (many chart libraries Recharts, Nivo can export the chart's SVG element directly scalable, high-quality). For multi-chart PDF reports, jsPDF combines multiple chart exports into a single PDF document. For production-quality publication-ready charts, visx (Airbnb's React + D3 primitives library) produces SVG output that is directly exportable and styleable. ClickMasters implements chart export with correct rendering (chart must be fully visible in the DOM off-screen charts require workarounds) and appropriate resolution scaling for print quality.
What chart type should I use for my data?
Chart type selection depends on what relationship you are communicating. Time series (how does a metric change over time?): line chart or area chart. Comparison (how do values compare across categories?): bar chart (vertical for small category counts, horizontal for many categories or long labels). Part-to-whole (what is the composition of a total?): stacked bar or pie/donut chart (use sparingly humans read bar lengths more accurately than pie angles). Distribution (how are values distributed?): histogram, box plot, or violin plot. Correlation (is there a relationship between two variables?): scatter plot. Flow (how does a quantity move between states?): Sankey diagram. Hierarchy (how is a quantity broken down into nested categories?): treemap or sunburst. Geographic (how does a metric vary by location?): choropleth map. Network (how are entities connected?): force-directed graph. The most common data visualisation mistake is using a pie chart for data with more than 3-4 categories a horizontal bar chart communicates the same information far more accurately.
