IgrDataChart – ボタンクリックでズームイン/ズームアウトしたい – INFRAGISTICS ナレッジベース

公開日: 2026/10/27
最終更新日: 2026/10/27

Ignite UI for React の IgrDataChart で、ボタンのクリックによってチャートをズームイン/ズームアウトする方法を紹介します。

IgrDataChart の設定

ボタンのイベントハンドラからチャートのメソッドを呼び出せるように、useRef で IgrDataChart への参照を作成し、ref プロパティに設定します。あわせて、水平方向・垂直方向のズームを有効にします。

const chartRef = useRef<IgrDataChart>(null);

return (
  <IgrDataChart
    ref={chartRef}
    dataSource={sampleData}
    isHorizontalZoomEnabled={true}
    isVerticalZoomEnabled={true}
    ...
  >
    <IgrCategoryXAxis name="xAxis" label="year" />
    <IgrNumericYAxis name="yAxis" ... />
    <IgrLineSeries name="europeSeries" ... />
  </IgrDataChart>
);

zoomIn / zoomOut メソッドの使用

ボタンの onClick に設定したハンドラ内で、参照を通じて zoomIn メソッドと zoomOut メソッドを呼び出します。引数にはズームする割合を指定します (サンプルでは 0.1)。

const handleZoomIn = () => {
  chartRef.current?.zoomIn(0.1);
};

const handleZoomOut = () => {
  chartRef.current?.zoomOut(0.1);
};

<IgrButton onClick={handleZoomIn}>Zoom In</IgrButton>
<IgrButton onClick={handleZoomOut}>Zoom Out</IgrButton>

実行結果

「Zoom In」ボタンをクリックするとチャートが拡大され、「Zoom Out」ボタンをクリックするとチャートが縮小されます。

サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

Tagged: IgrDataChart