ツリーマップライブラリ比較

3つの人気ライブラリで階層データの構成比を面積で表示し、実装方法とスタイルを比較

rechartsv3.7.0 @nivo/corev0.99.0 chart.jsv4.5.1 chartjs-chart-treemapv3.1.0

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

ECサイトのカテゴリー別売上（大カテゴリー3つ、各カテゴリーに子カテゴリーを持つ階層構造）のデータを使用しています。

{
  "name": "売上全体",
  "children": [
    {
      "name": "家電",
      "children": [
        {
          "name": "スマートフォン",
          "value": 4800
        },
        {
          "name": "PC・タブレット",
          "value": 3200
        },
        {
          "name": "オーディオ",
          "value": 1600
        },
        {
          "name": "カメラ",
          "value": 1200
        }
      ]
    },
    {
      "name": "ファッション",
      "children": [
        {
          "name": "メンズ",
          "value": 2800
        },
        {
          "name": "レディース",
          "value": 3600
        },
        {
          "name": "シューズ",
          "value": 1400
        },
        {
          "name": "バッグ",
          "value": 1000
        }
      ]
    },
    {
      "name": "食品・日用品",
      "children": [
        {
          "name": "食品",
          "value": 2200
        },
        {
          "name": "飲料",
          "value": 1800
        },
        {
          "name": "日用品",
          "value": 1400
        },
        {
          "name": "ペット用品",
          "value": 800
        }
      ]
    }
  ]
}

1. Recharts

RechartsのTreemapコンポーネントで階層データをそのまま渡すだけで面積比のタイル表示を実現。contentプロパティにカスタムコンポーネントを渡すことでセル内のラベルや色を自由にカスタマイズ可能。aspectRatioで縦横比の調整もできる。

✓ Treemap標準搭載✓ 宣言的API✓ カスタムコンテンツ

特徴: Treemapコンポーネントが標準搭載されており追加パッケージ不要。 contentプロパティでカスタムSVG要素を使い、ラベルや色を自在に制御できる。

tsx

'use client';
import { Treemap, ResponsiveContainer, Tooltip } from 'recharts';

const data = [
  { name: '製品A', size: 4200, fill: '#3b82f6' },
  { name: '製品B', size: 3800, fill: '#10b981' },
  { name: '製品C', size: 2100, fill: '#8b5cf6' },
  { name: '製品D', size: 1500, fill: '#f97316' },
  { name: '製品E', size: 900, fill: '#ec4899' },
];

export function RechartsTreemap() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <Treemap data={data} dataKey="size" nameKey="name" aspectRatio={4 / 3}>
        <Tooltip formatter={(value) => [`¥${value.toLocaleString()}`, '売上']} />
      </Treemap>
    </ResponsiveContainer>
  );
}

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

React + Tailwind CSSで、Rechartsを使ったツリーマップを実装してください。

- 使用ライブラリ: recharts の Treemap コンポーネント（dynamic importでSSR無効化）、ResponsiveContainer
- サンプルデータ: ECサイトのカテゴリー別売上（3大カテゴリー・各4子カテゴリーの階層構造）を用意すること
- 階層表示: contentプロパティにカスタムコンポーネントを渡してラベルと色をカスタマイズすること
- インタラクティブ: ホバー時にツールチップでカテゴリー名と売上金額を表示すること
- レスポンシブ: ResponsiveContainerで親要素の幅に応じてチャートサイズが変わるよう対応すること
- カラーリング: カテゴリーごとに色を設定し値の大きさに応じて濃淡をつけること

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

2. Nivo

@nivo/treemapパッケージでツリーマップをネイティブサポート。tileプロパティでsquarify・slice・diceなど複数のタイリングアルゴリズムを選択可能。ホバー時のアニメーションやツールチップが標準で充実しており、identityとvalueの指定だけで美しいツリーマップが完成。

✓ D3.jsベース✓ 美しいデザイン✓ インタラクティブ

特徴: D3.jsベースで滑らかなアニメーションとホバーインタラクションが標準装備。 tileアルゴリズムの切り替えでレイアウトのバリエーションを簡単に試せる。

tsx

'use client';
import { ResponsiveTreeMap } from '@nivo/treemap';

const data = {
  name: 'root',
  children: [
    { name: '製品A', value: 4200 },
    { name: '製品B', value: 3800 },
    { name: '製品C', value: 2100 },
    { name: '製品D', value: 1500 },
    { name: '製品E', value: 900 },
  ],
};

export function NivoTreemap() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveTreeMap
        data={data}
        identity="name"
        value="value"
        margin={{ top: 10, right: 10, bottom: 10, left: 10 }}
        colors={{ scheme: 'category10' }}
        borderWidth={2}
        borderColor={{ from: 'color', modifiers: [['darker', 0.5]] }}
        labelSkipSize={12}
      />
    </div>
  );
}

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

React + Tailwind CSSで、Nivoを使ったツリーマップを実装してください。

- 使用ライブラリ: @nivo/treemap の ResponsiveTreeMap（dynamic importでSSR無効化）
- サンプルデータ: ECサイトのカテゴリー別売上（3大カテゴリー・各4子カテゴリーの階層構造）を用意すること
- 階層表示: identity・valueプロパティで階層構造を自動的に視覚化すること
- tileアルゴリズム: tileプロパティでsquarify・slice・diceなどのタイリングアルゴリズムを選択すること
- インタラクティブ: ホバー時にツールチップでカテゴリー名と売上金額を表示すること
- レスポンシブ: ResponsiveTreeMapで親要素の幅に応じてチャートサイズが変わるよう対応すること
- カラーリング: カテゴリーごとに色を設定し値の大きさに応じて濃淡をつけること

3. Chart.js (react-chartjs-2)

Chart.jsにはツリーマップの専用タイプはないが、chartjs-chart-treemapプラグインを使用することで実現可能。Canvas描画のためセル数が多くても高いパフォーマンスを維持。keyとgroupsを指定するシンプルな設定でグループ化表示にも対応。

✓ Canvas描画✓ プラグイン対応✓ 高パフォーマンス

特徴: chartjs-chart-treemapプラグインをChartJS.registerするだけで利用可能。フラットなデータをkeyとgroupsで階層化でき、既存Chart.jsプロジェクトへの追加が容易。

tsx

'use client';
import { Chart } from 'react-chartjs-2';
import { Chart as ChartJS, Tooltip, Legend } from 'chart.js';
import { TreemapController, TreemapElement } from 'chartjs-chart-treemap';

ChartJS.register(Tooltip, Legend, TreemapController, TreemapElement);

const rawData = [
  { category: '製品A', value: 4200 },
  { category: '製品B', value: 3800 },
  { category: '製品C', value: 2100 },
  { category: '製品D', value: 1500 },
  { category: '製品E', value: 900 },
];

const data = {
  datasets: [{
    label: '売上構成',
    tree: rawData,
    key: 'value',
    groups: ['category'],
    backgroundColor: (ctx: any) => {
      const colors = ['#3b82f6', '#10b981', '#8b5cf6', '#f97316', '#ec4899'];
      return colors[ctx.dataIndex % colors.length];
    },
    borderWidth: 2,
    borderColor: 'white',
  }],
};

export function ChartJSTreemap() {
  return (
    <Chart type={"treemap" as any} data={data as any}
      options={{ responsive: true, maintainAspectRatio: false }} />
  );
}

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

React + Tailwind CSSで、Chart.js（chartjs-chart-treemap）を使ったツリーマップを実装してください。

- 使用ライブラリ: chartjs-chart-treemap プラグイン（dynamic importでSSR無効化）、ChartJS.register でTreemapControllerを登録
- サンプルデータ: ECサイトのカテゴリー別売上（3大カテゴリー・各4子カテゴリー）を用意すること
- 階層表示: keyとgroupsプロパティでフラットなデータを階層化して表示すること
- インタラクティブ: ホバー時にツールチップでカテゴリー名と売上金額を表示すること
- レスポンシブ: responsive: true、maintainAspectRatio: falseで親要素に合わせたサイズにすること
- カラーリング: カテゴリーごとに色を設定し値の大きさに応じて濃淡をつけること

ライブラリ比較

ライブラリ	レンダリング	ツリーマップ対応	タイリング選択	おすすめ用途
Recharts	SVG	◎ 標準搭載	△	Reactアプリ全般
Nivo	SVG	◎ 専用パッケージ	◎	デザイン重視のダッシュボード
Chart.js	Canvas	◯ プラグイン	△	大量データ・高パフォーマンス

選択のポイント

•Recharts: Treemapが標準搭載されており追加パッケージ不要。contentプロパティで自由なカスタマイズが可能で、Reactプロジェクトへの導入が最も手軽。
•Nivo: @nivo/treemapで洗練されたデザインと豊富なタイリングアルゴリズムを提供。インタラクションやアニメーションにこだわりたい場合に最適。
•Chart.js: chartjs-chart-treemapプラグインで対応。既にChart.jsを使用しているプロジェクトへの追加が容易で、大量のセルでもCanvas描画でパフォーマンスが安定。