クリックイベント・インタラクション

// Recharts: 各コンポーネントに onClick / onMouseEnter を設定
<BarChart
  data={data}
  onClick={(data, index) => {
    // チャートエリア全体のクリック
    console.log('チャートクリック:', data, index);
  }}
>
  <Bar
    dataKey="value"
    onClick={(data, index) => {
      console.log('バークリック:', data, index);
      // data = { value: 100, month: '1月', payload: {...} }
    }}
    onMouseEnter={(data, index) => {
      console.log('バーホバー:', data);
    }}
    cursor="pointer"
  />
</BarChart>

// 折れ線グラフのポイントクリック
<Line
  dataKey="value"
  activeDot={{
    onClick: (event, data) => {
      console.log('ポイントクリック:', data);
    },
  }}
/>

// ECharts: chart.on() でイベントを登録
import * as echarts from 'echarts';

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

// クリックイベント
chart.on('click', (params) => {
  console.log(
    'クリック:', params.seriesName, params.name, params.value
  );
  // params.componentType: 'series' | 'markPoint' など
  // params.seriesIndex, params.dataIndex, params.data
});

// ホバーイベント
chart.on('mouseover', (params) => {
  console.log('ホバー:', params.name, params.value);
});

// 凡例クリック
chart.on('legendselectchanged', (params) => {
  console.log('凡例トグル:', params.name, params.selected);
});

// イベントを解除
// chart.off('click');

// react-plotly.js: イベントプロップで処理
import Plot from 'react-plotly.js';

<Plot
  data={data}
  layout={layout}

  // クリックイベント
  onClick={(event) => {
    const point = event.points[0];
    console.log('クリック:', point.x, point.y, point.data.name);
  }}

  // ホバーイベント
  onHover={(event) => {
    const point = event.points[0];
    console.log('ホバー:', point.x, point.y);
  }}

  // 選択イベント（ボックス/ラッソ選択）
  onSelected={(event) => {
    if (event?.points) {
      const selected = event.points.map(p => ({ x: p.x, y: p.y }));
      console.log('選択:', selected);
    }
  }}

  // ズームイベント
  onRelayout={(event) => {
    console.log('ズーム/パン:', event['xaxis.range[0]'], event['xaxis.range[1]']);
  }}
/>

// Chart.js: onClick / onHover オプションで処理
const options = {
  onClick: (event, elements, chart) => {
    if (elements.length > 0) {
      const element = elements[0];
      const datasetIndex = element.datasetIndex;
      const dataIndex = element.index;
      const value = chart.data.datasets[datasetIndex].data[dataIndex];
      const label = chart.data.labels[dataIndex];
      console.log(`クリック: ${label} = ${value}`);
    }
  },

  onHover: (event, elements, chart) => {
    // ホバー時のカーソルを変更
    event.native.target.style.cursor =
      elements.length > 0 ? 'pointer' : 'default';
  },

  // ホバー検出の設定
  interaction: {
    mode: 'nearest',     // 'point' | 'index' | 'dataset' | 'nearest' | 'x' | 'y'
    intersect: true,
  },
};

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

// onClick / onMouseEnter / onMouseLeave プロップ
<ResponsiveBar
  data={data}

  onClick={(datum, event) => {
    console.log('クリック:', datum.id, datum.value, datum.indexValue);
    // datum: { id, value, formattedValue, indexValue, data, color }
  }}

  onMouseEnter={(datum, event) => {
    console.log('ホバー開始:', datum.id, datum.value);
  }}

  onMouseLeave={(datum, event) => {
    console.log('ホバー終了');
  }}
/>

// 折れ線グラフ（ResponsiveLine）
<ResponsiveLine
  data={data}
  onClick={(point, event) => {
    console.log('ポイントクリック:', point.data.x, point.data.y);
  }}
/>

// ApexCharts: chart.events で各イベントを設定
const options = {
  chart: {
    events: {
      // 要素クリック
      click: (event, chartContext, config) => {
        const { seriesIndex, dataPointIndex } = config;
        if (dataPointIndex >= 0) {
          const value = config.globals.series[seriesIndex][dataPointIndex];
          const label = config.globals.labels[dataPointIndex];
          console.log(`クリック: ${label} = ${value}`);
        }
      },

      // データポイントホバー
      dataPointMouseEnter: (event, chartContext, config) => {
        console.log('ホバー:', config.dataPointIndex);
      },

      // 凡例クリック
      legendClick: (chartContext, seriesIndex, config) => {
        console.log('凡例クリック: 系列', seriesIndex);
      },

      // ズーム（selection / zoom が有効な場合）
      zoomed: (chartContext, { xaxis, yaxis }) => {
        console.log('ズーム:', xaxis.min, xaxis.max);
      },
    },
  },
};