カスタム ツールチップ

igx-financial-chart コントロールは、各シリーズ タイプにデフォルト ツールチップを提供します。デフォルト ツールチップは特定のシリーズ項目に関連するすべての情報を表示します。これはシリーズ タイトル、データ値、および軸値を含みます。シリーズのスタイルと一致します。デフォルト ツールチップのコンテンツおよびルック アンド フィールを変更するためにカスタム ツールチップを構成できます。

デモ

StackBlitz で開く

ツールチップ コンテンツは、以下のコードのように、ツールチップのためのテンプレートを作成してカスタマイズ化されます。

<ng-template let-series="series" let-item="item" #valueTooltip> 
    <div> 
        <span [style.color]="series.actualBrush">{{series.title}}</span> 
        <span> stock opened on {{item.time | date}} with a value of ${{item.open | number}} and closed with a value of ${{item.close | number}}.</span> 
    </div> 
</ng-template> 


<igx-financial-chart 
    width="850px"
    height="600px"
    [dataSource]="data"
    [tooltipTemplate]="valueTooltip" > 
</igx-financial-chart>