レスポンシブ対応

import { ResponsiveContainer, LineChart, Line, XAxis, YAxis } from 'recharts';

// ResponsiveContainer でラップするだけでコンテナ幅に自動追従
<ResponsiveContainer width="100%" height={400}>
  <LineChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Line type="monotone" dataKey="value" />
  </LineChart>
</ResponsiveContainer>

// アスペクト比を維持したい場合（height不要）
<ResponsiveContainer width="100%" aspect={16 / 9}>
  <BarChart data={data}>
    {/* ... */}
  </BarChart>
</ResponsiveContainer>

// debounce でリサイズパフォーマンスを最適化
<ResponsiveContainer width="100%" height={400} debounce={50}>
  <LineChart data={data}>
    {/* ... */}
  </LineChart>
</ResponsiveContainer>

// ECharts: resize() をウィンドウリサイズ時に呼び出す
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    chart.setOption(option);

    // リサイズハンドラ（debounce推奨）
    const handleResize = () => chart.resize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      chart.dispose();
    };
  }, []);

  return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />;
};

// ResizeObserver で親要素の変化を検知（より精密）
useEffect(() => {
  const observer = new ResizeObserver(() => chart.resize());
  observer.observe(chartRef.current.parentElement);
  return () => observer.disconnect();
}, []);

// Plotly.js: config.responsive と useResizeHandler で自動リサイズ
import Plot from 'react-plotly.js';

<Plot
  data={data}
  layout={{
    autosize: true,  // コンテナサイズに自動フィット
    height: 400,
    margin: { l: 50, r: 20, t: 30, b: 50 },
  }}
  config={{
    responsive: true,  // ウィンドウリサイズ時に自動リサイズ
  }}
  style={{ width: '100%' }}
  useResizeHandler={true}  // react-plotly.js のリサイズ対応prop
/>

// Chart.js: responsive オプションで自動リサイズ
const options = {
  responsive: true,            // コンテナサイズに追従（デフォルトtrue）
  maintainAspectRatio: false,  // アスペクト比を維持しない（height固定時に使用）
  aspectRatio: 2,              // maintainAspectRatio: true のときの比率（幅/高さ）

  // resizeDelay でリサイズのdebounce（ms）
  resizeDelay: 50,
};

// CSS でコンテナの高さを指定
// <div style={{ position: 'relative', height: '400px', width: '100%' }}>
//   <canvas ref={canvasRef} />
// </div>

import { ResponsiveLine } from '@nivo/line';
import { ResponsiveBar } from '@nivo/bar';

// Nivo は Responsive* コンポーネントを使うだけでコンテナに自動追従
// 親要素に height を CSS で設定する必要がある

<div style={{ height: '400px' }}>
  <ResponsiveLine
    data={data}
    // width / height prop は不要（コンテナから自動計算）
    margin={{ top: 10, right: 20, bottom: 50, left: 60 }}
  />
</div>

// Responsive版 vs 固定サイズ版
// ResponsiveLine → 親要素にあわせて自動リサイズ（推奨）
// Line           → width / height を明示指定（固定サイズ）

// ApexCharts: width: '100%' + responsive でブレークポイント対応
const options = {
  chart: {
    width: '100%',    // コンテナ幅に追従
    height: 400,
  },

  // responsive: ブレークポイント別にオプションをオーバーライド
  responsive: [
    {
      breakpoint: 768,     // 768px 以下
      options: {
        chart: { height: 300 },
        legend: { position: 'bottom' },
        plotOptions: {
          bar: { columnWidth: '80%' },
        },
      },
    },
    {
      breakpoint: 480,     // 480px 以下
      options: {
        chart: { height: 250 },
        legend: { show: false },
      },
    },
  ],
};