React ツールチップ

React データ チャート コンポーネントは、2 つのツールチップ 「レイヤー」 と共にツールチップを表示できます。これらのツールチップを使用すると、データ チャート内の各シリーズに関するコンテキスト情報を確認するのに役立ちます。

React ツールチップの例

Edit on CodeSandbox

React データ チャート コンポーネントでツールチップ レイヤーを有効にするには、対話モジュールをインポートして登録する必要があります。以下のコードを使用できます。

import { IgrDataChartInteractivityModule } from 'igniteui-react-charts';

IgrDataChartInteractivityModule.register();

デフォルト ツールチップ

React データ チャート コンポーネントは、各シリーズ タイプにデフォルト ツールチップを提供します。デフォルトのツールチップには、シリーズのタイトル、データ値、軸の値など、ホバーされている特定のシリーズ項目に関連するすべての情報が表示されます。これらもシリーズの外観に合わせてスタイル設定されています。

次のコード スニペットは、React データ チャート コンポーネントで既定のツールチップを有効にする方法を示しています。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">

    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrColumnSeries name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value"
        showDefaultTooltip={true} />
</IgrDataChart>

カテゴリ ツールチップ レイヤー

CategoryToolTipLayer は、カテゴリ軸を使用する React データ チャート コンポーネントのシリーズ用にグループ化されたヒントを表示します。グループ化されたツールチップは現在、React データ チャート コンポーネントの上部に表示されています。

以下のコードは、カテゴリ ツールチップ レイヤーを React データ チャート コンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">

    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrColumnSeries name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value"
        showDefaultTooltip={true} />

    <IgrCategoryToolTipLayer name="CategoryToolTipLayer" />
</IgrDataChart>

項目ツールチップ レイヤー

項目ツールチップ レイヤーは、特定のシリーズにマウスがホバーする場合に React データ チャート コンポーネント上のすべてのシリーズに関するヒントを個別に表示します。ツールチップスタイルは、ツールチップを表示しているシリーズから継承されます。

以下のコードは、項目ツールチップ レイヤーを React データ チャート コンポーネントに追加する方法を示します。

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">

    <IgrCategoryXAxis name="xAxis" />
    <IgrNumericYAxis name="yAxis" />

    <IgrColumnSeries name="series1"
        xAxisName="xAxis"
        yAxisName="yAxis"
        valueMemberPath="Value"
        showDefaultTooltip={true} />

    <IgrItemToolTipLayer />
</IgrDataChart>