レーダーチャートライブラリ比較

3つの人気ライブラリで多軸データを視覚化し、レーダーチャートの実装を比較

rechartsv3.7.0 @nivo/corev0.99.0 chart.jsv4.5.1 react-chartjs-2v5.3.1

使用しているサンプルデータ

2人のプレイヤーの能力値（6軸）を比較するデータを使用しています。各項目は0〜100のスコアで評価されています。

[
  {
    "subject": "攻撃力",
    "プレイヤーA": 85,
    "プレイヤーB": 65
  },
  {
    "subject": "防御力",
    "プレイヤーA": 70,
    "プレイヤーB": 90
  },
  {
    "subject": "スピード",
    "プレイヤーA": 90,
    "プレイヤーB": 55
  },
  {
    "subject": "スタミナ",
    "プレイヤーA": 60,
    "プレイヤーB": 80
  },
  {
    "subject": "テクニック",
    "プレイヤーA": 75,
    "プレイヤーB": 85
  },
  {
    "subject": "メンタル",
    "プレイヤーA": 80,
    "プレイヤーB": 70
  }
]

1. Recharts

宣言的なAPIで直感的にレーダーチャートを構築。複数データの重ね合わせが簡単。

✓ 宣言的API✓ 複数データ対応✓ アニメーション

特徴: Radarコンポーネントを追加するだけで複数データを重ねて表示可能。 PolarGridやPolarAngleAxisで軸の表示を細かく制御できる。

tsx

'use client';
import {
  RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
  Legend, ResponsiveContainer,
} from 'recharts';

const data = [
  { subject: 'デザイン', A: 120, B: 110 },
  { subject: 'パフォーマンス', A: 98, B: 130 },
  { subject: 'ドキュメント', A: 86, B: 130 },
  { subject: 'コミュニティ', A: 99, B: 100 },
  { subject: '学習コスト', A: 85, B: 90 },
];

export function RechartsRadarChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <RadarChart data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="subject" />
        <PolarRadiusAxis angle={30} domain={[0, 150]} />
        <Radar name="ライブラリA" dataKey="A" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.4} />
        <Radar name="ライブラリB" dataKey="B" stroke="#10b981" fill="#10b981" fillOpacity={0.4} />
        <Legend />
      </RadarChart>
    </ResponsiveContainer>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Rechartsを使ったレーダーチャートを実装してください。

- 使用ライブラリ: recharts（RadarChart、Radar、PolarGrid、PolarAngleAxis、PolarRadiusAxis、Legend、Tooltip、ResponsiveContainer）
- サンプルデータ: 2プレイヤーのスキル評価6軸（攻撃力・防御力・スピード・スタミナ・テクニック・メンタル）を用意すること
- インタラクティブ: ホバー時にツールチップで各軸の値を表示すること
- 凡例: 複数のデータ系列の凡例を表示すること
- レスポンシブ: ResponsiveContainerで親要素の幅に応じてチャートサイズが変わるよう対応すること
- スタイリング: fillOpacityで各系列を半透明の塗りつぶしにし、複数Radarコンポーネントを重ねて比較できるようにすること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

2. Nivo

美しいデフォルトスタイルとインタラクティブな操作が魅力のレーダーチャート

✓ 美しいデフォルト✓ ドット表示✓ テーマ対応

特徴: gridShapeで円形・多角形を切り替え可能。 dotの表示やblendModeで重なり部分の表現を制御できる洗練されたデザイン。

tsx

'use client';
import { ResponsiveRadar } from '@nivo/radar';

const data = [
  { subject: 'デザイン', A: 120, B: 110 },
  { subject: 'パフォーマンス', A: 98, B: 130 },
  { subject: 'ドキュメント', A: 86, B: 130 },
  { subject: 'コミュニティ', A: 99, B: 100 },
  { subject: '学習コスト', A: 85, B: 90 },
];

export function NivoRadarChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveRadar
        data={data}
        keys={['A', 'B']}
        indexBy="subject"
        maxValue={150}
        margin={{ top: 40, right: 60, bottom: 40, left: 60 }}
        colors={['#3b82f6', '#10b981']}
        fillOpacity={0.4}
        legends={[{ anchor: 'top-left', direction: 'column', itemWidth: 80, itemHeight: 20 }]}
      />
    </div>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Nivoを使ったレーダーチャートを実装してください。

- 使用ライブラリ: @nivo/radar（ResponsiveRadar）
- サンプルデータ: 2プレイヤーのスキル評価6軸（攻撃力・防御力・スピード・スタミナ・テクニック・メンタル）をNivo形式（keysとindexByを使ったオブジェクト配列）で用意すること
- インタラクティブ: ホバー時にツールチップで各軸の値を表示すること
- 凡例: 複数のデータ系列の凡例を表示すること
- レスポンシブ: ResponsiveRadarで親要素の幅に応じてチャートサイズが変わるよう対応すること
- スタイリング: gridShapeで円形・多角形を切り替え、fillOpacityとblendModeで重なり部分の表現を制御し、dotSize・dotBorderWidthでデータポイントのドットを表示すること

3. Chart.js

軽量で高速なCanvas描画。シンプルな設定でレーダーチャートを表示。

✓ 軽量✓ Canvas描画✓ スケール制御

特徴: RadialLinearScaleで目盛りの範囲やステップを制御。 Fillerプラグインで塗りつぶし表示を有効化。Canvas描画のため大量データでも高速。

tsx

'use client';
import { Radar } from 'react-chartjs-2';
import {
  Chart as ChartJS, RadialLinearScale, PointElement,
  LineElement, Filler, Tooltip, Legend,
} from 'chart.js';

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

const data = {
  labels: ['デザイン', 'パフォーマンス', 'ドキュメント', 'コミュニティ', '学習コスト'],
  datasets: [
    {
      label: 'ライブラリA',
      data: [120, 98, 86, 99, 85],
      backgroundColor: 'rgba(59, 130, 246, 0.3)',
      borderColor: '#3b82f6',
    },
    {
      label: 'ライブラリB',
      data: [110, 130, 130, 100, 90],
      backgroundColor: 'rgba(16, 185, 129, 0.3)',
      borderColor: '#10b981',
    },
  ],
};

export function ChartJSRadarChart() {
  return <Radar data={data} options={{ responsive: true, maintainAspectRatio: false }} height={300} />;
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Chart.js（react-chartjs-2）を使ったレーダーチャートを実装してください。

- 使用ライブラリ: react-chartjs-2（Radar）、chart.js（RadialLinearScale、PointElement、LineElement、Filler、Tooltip、Legend）
- サンプルデータ: 2プレイヤーのスキル評価6軸（攻撃力・防御力・スピード・スタミナ・テクニック・メンタル）を用意すること
- インタラクティブ: ホバー時にツールチップで各軸の値を表示すること
- 凡例: 複数のデータ系列の凡例を表示すること
- レスポンシブ: responsive: true、maintainAspectRatio: falseで親要素に合わせてサイズを調整すること
- スタイリング: datasetsのbackgroundColorにRGBAで透明度を設定して塗りつぶし表示し、scales.rのbeginAtZero・max・stepSizeで目盛りの範囲を制御すること

ライブラリ比較

ライブラリ	複数データ	グリッド形状	アニメーション	おすすめ用途
Recharts	◎	多角形	◎	Reactダッシュボード
Nivo	◎	円形・多角形切替	◎	デザイン重視
Chart.js	◎	多角形（デフォルト）	◯	シンプルな用途