nivoとは？D3ベースのReactデータ可視化コンポーネント

ページ内ナビ

概要

nivoは、D3を土台にReact向けのデータ可視化componentを提供するlibrary群です。bar、line等のchart packageを必要に応じて追加し、responsive表示、theme、pattern/gradient、motion、SVG/CanvasなどをReact componentとして組み込めます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-09-30

主な特徴

chart種別ごとのpackageを組み合わせて宣言的に可視化する

@nivo/coreと@nivo/barなど必要なchart packageを追加し、React componentへdataやscale、axis等のpropsを渡して可視化を構築します。

出典：[2][3][4]

SVG・Canvas・responsive表示・theme・motionを用途に合わせて選ぶ

READMEはSVG、HTML、Canvas chart、responsive component、theme、pattern、gradient、react-springによるmotion、server-side renderingを主要機能として挙げています。

出典：[2]

向いている用途

dashboardや分析画面でReactと統一したchart component体系を使いたい場合に向く

複数種類のchartをReact componentとして揃え、themeやinteractionを共通化しながらdashboardや分析UIへ組み込みたい用途に向きます。

出典：[2]

導入前の確認

描画backendとデータ量に合わせてcomponentを選ぶ

SVGとCanvasでは表現力、DOM要素数、interactionの扱いが異なります。大量dataや高頻度更新では、見た目だけでなく描画backendと必要なinteractionを基準にcomponentを選びます。

出典：[2]

0.99.0のpackage versionとReact対応範囲を揃える

latest releaseはv0.99.0で、@nivo/coreと@nivo/barも0.99.0です。core packageはReact 16.14〜19をpeer dependencyとして受け入れるため、複数の@nivo/* packageを同一versionへ揃えて導入します。

出典：[5][3][4]

参考にした公式資料

[1]plouc/nivo repository(2026-09-30)
[2]nivo README(2026-09-30)
[3]@nivo/core 0.99.0 package metadata(2026-09-30)
[4]@nivo/bar 0.99.0 package metadata(2026-09-30)
[5]nivo v0.99.0 release(2026-09-30)
[6]nivo MIT license(2026-09-30)

編集部からの補足

nivoはchart種別ごとの@nivo/* packageを組み合わせる構成です。0.99.0の@nivo/coreはReact 16.14〜19をpeer dependencyとして受け入れます。描画backendや必要機能に応じてpackageを選び、必要なchartだけ導入するのが扱いやすいです。

3ステップで試す

1
nivo 0.99.0のcoreとBarを追加
coreと試すchart packageを同じversionで追加します。
npm install @nivo/core@0.99.0 @nivo/bar@0.99.0
2
ResponsiveBarを読み込む
最小のdataとbar chart componentを用意します。
import { ResponsiveBar } from '@nivo/bar'; const data = [{ country: 'JP', value: 42 }];
3
Bar chartを描画
高さを持つcontainer内で描画し、必要に応じてaxis、theme、color、interactionを追加します。
<ResponsiveBar data={data} keys={['value']} indexBy="country" />

公式READMEで確認

成長

成長の推移 · 直近30日

14,105 Stars

推移データを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

canvas
charts
components
d3js
dataviz
isomorphic
react
svg

Stars: 14,105
Forks: 1,082
Watchers: 70
Open Issues: 52
所有者種別: User
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/07/21

概要

特徴と向いている用途

主な特徴

chart種別ごとのpackageを組み合わせて宣言的に可視化する

SVG・Canvas・responsive表示・theme・motionを用途に合わせて選ぶ

向いている用途

dashboardや分析画面でReactと統一したchart component体系を使いたい場合に向く

導入前の確認

描画backendとデータ量に合わせてcomponentを選ぶ

0.99.0のpackage versionとReact対応範囲を揃える

参考にした公式資料

3ステップで試す

nivo 0.99.0のcoreとBarを追加

ResponsiveBarを読み込む

Bar chartを描画

成長

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHub Topics

関連情報

あわせて探訪