Building Interactive Charts with Nivo for React

Note: When a React application needs to visualize tens of thousands of data points, choosing a chart library becomes critical. D3.js gives full control but requires hundreds of lines of code. Chart.js and Recharts are simpler but limited in customization. Nivo is the sweet spot: React component-based approach, support for SVG and Canvas, dozens of built-in chart types that can be customized for any task. Our engineers have used Nivo in production for over 5 years, delivering 50+ data visualization projects for fintech, e-commerce, and analytics. Development savings on visualization reach up to 30% compared to D3, and integration time is reduced by 2–3 times. Source: official Nivo documentation

A typical problem is incorrect data format. Nivo expects an array of objects with id and data fields. Hydration mismatch errors in SSR occur when data differs between client and server. Nivo renders correctly on the server as long as data is passed identically. We ensure stable operation at all stages.

Why Nivo is better than D3 for React applications

D3 works with the DOM at a low level, while Nivo provides ready-made React components. With D3, you must manage the lifecycle, updates, and destruction of charts yourself. Nivo handles this: when data changes, just pass new props, and the component re-renders with animation. D3 requires manual update and exit calls. Nivo also renders on the server (SSR) using React, while D3 typically works only on the client. This is critical for SEO and LCP. Additionally, Nivo makes it easy to switch between SVG and Canvas: for large datasets (10,000+ points), use Canvas—performance at 60 fps versus 30 fps for D3.

How to boost chart performance

When working with large datasets (over 5,000 points), we recommend:

• Use useCanvas instead of SVG.
• Memoize data with React.memo or useMemo.
• Limit points on screen via aggregation.
• Configure motionConfig to disable animations.

These techniques speed up rendering by 2–3 times and reduce CPU load.

Nivo vs D3 comparison

During development, we consider responsiveness: charts automatically adapt to container size via Nivo's Responsive components. This is especially important for dashboards viewed on different devices. We also configure tooltips to display correctly on mobile screens.

What is included

• Source code of chart components with custom tooltips.
• Documentation on data format and props.
• Integration with existing API.
• Mobile responsiveness.
• Team training (up to 1 hour).
• 3-month warranty.

Typical mistakes and how to avoid them

• Wrong data structure: ensure the array contains objects with id (string) and data (array of points).
• Missing keys when mapping: use React.memo and a unique key.
• Ignoring responsive: wrap in a container with a fixed height (min-height).
• Forgetting useMesh: without it, tooltips won't work.
• Missing dependencies: @nivo/core is required.

Process

1. Data analysis and visualization requirements.
2. Select chart types and prototype.
3. Configure backend to return data in the required format.
4. Integrate Nivo components, customize tooltips, legends.
5. Performance optimization (memoization, Canvas for large data).
6. Test on mobile devices and different screens.
7. Deploy and monitor.

Timeline

From 3 to 10 days depending on complexity. Pricing is individual.

npm install @nivo/line @nivo/bar @nivo/pie @nivo/heatmap @nivo/core 

import { ResponsiveLine } from '@nivo/line'; function NivoLineChart({ data }) { // Nivo expects format: [{ id: 'series', data: [{ x, y }] }] const nivoData = [ { id: 'Revenue', color: '#3b82f6', data: data.map(d => ({ x: d.date, y: d.revenue })) }, { id: 'Target', color: '#f59e0b', data: data.map(d => ({ x: d.date, y: d.target })) } ]; return ( <div style={{ height: 350 }}> <ResponsiveLine data={nivoData} margin={{ top: 20, right: 120, bottom: 50, left: 70 }} xScale={{ type: 'time', format: '%Y-%m-%d', precision: 'day' }} xFormat="time:%d.%m.%Y" yScale={{ type: 'linear', stacked: false }} yFormat=" >-.0f" curve="monotoneX" axisLeft={{ format: v => `${(v / 1000).toFixed(0)}k`, legend: 'Revenue ($)', legendOffset: -60, legendPosition: 'middle' }} axisBottom={{ format: '%d %b', tickValues: 'every 2 weeks' }} colors={{ scheme: 'paired' }} lineWidth={2} pointSize={4} enableArea areaOpacity={0.1} useMesh legends={[{ anchor: 'bottom-right', direction: 'column', itemWidth: 100, itemHeight: 20 }]} tooltip={({ point }) => ( <div className="chart-tooltip"> <strong>{point.data.xFormatted}</strong> <br /> {point.serieId}: {Number(point.data.y).toLocaleString('ru')} $ </div> )} /> </div> ); } 

import { ResponsiveBar } from '@nivo/bar'; function ConversionBarChart({ data }) { return ( <div style={{ height: 300 }}> <ResponsiveBar data={data} keys={['conversion']} indexBy="page" margin={{ top: 10, right: 20, bottom: 60, left: 60 }} padding={0.4} valueScale={{ type: 'linear' }} colors={({ data }) => { if (data.conversion >= 5) return '#22c55e'; if (data.conversion >= 2) return '#f59e0b'; return '#ef4444'; }} axisBottom={{ tickRotation: -45 }} axisLeft={{ format: v => `${v}%` }} label={d => `${d.value}%`} tooltip={({ data, value }) => ( <div className="chart-tooltip"> <strong>{data.page}</strong>: {value}% conversion </div> )} /> </div> ); } 

import { ResponsiveCalendar } from '@nivo/calendar'; function ActivityCalendar({ data }) { // data: [{ day: '2024-03-28', value: 42 }] return ( <div style={{ height: 200 }}> <ResponsiveCalendar data={data} from="2024-01-01" to="2024-12-31" emptyColor="#f3f4f6" colors={['#dbeafe', '#93c5fd', '#3b82f6', '#1d4ed8']} margin={{ top: 20, right: 20, bottom: 20, left: 20 }} yearSpacing={40} monthBorderColor="#ffffff" dayBorderWidth={2} dayBorderColor="#ffffff" tooltip={({ day, value }) => ( <div className="chart-tooltip">{day}: {value} events</div> )} /> </div> ); }