Overview
Nivo provides highly customizable React chart components built on D3, with SVG, Canvas, and HTML renderers.
Nivo focuses on delightful defaults and declarative React components. It covers a wide chart catalog—from bars and lines to sankeys, treemaps, and radars—while still exposing D3-powered customization.
Why Choose Nivo?
- Beautiful defaults with strong animation support
- Large catalog of React chart components
- SVG, Canvas, and HTML rendering options
- Isomorphic / server-side rendering friendly
Real-World Applications
A popular choice for React analytics dashboards, marketing sites with rich visuals, and products that want polished charts with less custom styling work.
Example Charts
Live Nivo demos (React via CDN) — bar, line, and pie.
Bar Chart
Line Chart
Pie Chart
Example Code
Minimal getting-started snippet for Nivo.
// npm install @nivo/bar
import { ResponsiveBar } from "@nivo/bar";
const data = [
{ label: "A", sales: 28 },
{ label: "B", sales: 55 },
{ label: "C", sales: 43 },
{ label: "D", sales: 72 },
];
export function SalesBar() {
return (
<div style={{ height: 240 }}>
<ResponsiveBar
data={data}
keys={["sales"]}
indexBy="label"
colors={["#e8b84a"]}
margin={{ top: 16, right: 16, bottom: 36, left: 40 }}
enableLabel={false}
/>
</div>
);
}