IgrDataChart – シリーズ色に応じたコールアウトレイヤーを表示

  • 公開日:
  • 最終更新日:

通常、コールアウトレイヤー (IgrCalloutLayer) を使用すると、すべてのシリーズに対して同じ色やスタイルで表示されます。しかし、シリーズごとに異なる背景色やテキストカラーを設定したい場合があります。

本記事では、IgrDataChart において、シリーズごとに異なる背景色やテキストカラーを持つ IgrCalloutLayer を設定する方法を解説します。

シリーズの設定

各シリーズには name プロパティを設定する必要があります。このプロパティは、IgrCalloutLayer で特定のシリーズをターゲットにする際に使用されます。以下は、IgrLineSeries の設定例です。

 <IgrLineSeries
         name="LineSeries1"

IgrCalloutLayer の設定

IgrCalloutLayer のtargetSeriesNameプロパティを使用することで、特定のシリーズをターゲットに設定できます。このプロパティには、ターゲットとなるシリーズの name を指定します。
さらに、calloutLeaderBrush や calloutTextColor をシリーズの色に合わせてカスタマイズすることで、個別に設定したコールアウトを作成できます。以下は、IgrCalloutLayer の設定例です。

 <IgrCalloutLayer
            targetSeriesName="LineSeries1"
            calloutLeaderBrush="green"
            calloutOutline="lightgreen"
            calloutBackground="white"
            calloutTextColor="darkgreen"

実行結果

この設定を適用すると、下図のようにシリーズごとに異なる色のコールアウトが表示されます。

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

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

npm ci
npm run dev

関連ドキュメント

Tagged: