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

'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>
  );
}

'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>
  );
}

'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 }} />
  );
}

'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

export function ApexTreemap() {
  const options = {
    chart: { type: 'treemap' as const, toolbar: { show: false } },
    colors: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316', '#ec4899'],
    dataLabels: { enabled: true, style: { fontSize: '12px' } },
    plotOptions: { treemap: { distributed: true, enableShades: false } },
    tooltip: { y: { formatter: (val: number) => `¥${val.toLocaleString()}` } },
  };
  const series = [{
    data: [
      { x: '製品A', y: 4200 },
      { x: '製品B', y: 3800 },
      { x: '製品C', y: 2100 },
      { x: '製品D', y: 1500 },
      { x: '製品E', y: 900 },
    ],
  }];
  return <Chart type="treemap" options={options} series={series} height={300} width="100%" />;
}

'use client';
import { MantineProvider } from '@mantine/core';
import { Treemap } from '@mantine/charts';
import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';

const data = [
  { name: 'JavaScript', size: 420 },
  { name: 'Python', size: 380 },
  { name: 'TypeScript', size: 290 },
  { name: 'Java', size: 260 },
  { name: 'C#', size: 210 },
  { name: 'Go', size: 160 },
  { name: 'Rust', size: 120 },
  { name: 'Kotlin', size: 90 },
  { name: 'Swift', size: 80 },
  { name: 'Ruby', size: 60 },
];

export function MantineTreemap() {
  return (
    <MantineProvider>
      <Treemap
        data={data}
        dataKey="size"
        height={300}
        withTooltip
        valueFormatter={(v) => `${v} 万人`}
      />
    </MantineProvider>
  );
}