IgxDataChart – 値によって縦棒チャートの柱の色を変更する

縦棒チャートの柱の色は IgxColumnSeriesComponent の brush プロパティによってシリーズ事に指定することができますが、同一のシリーズ内で柱ごとに色を指定する場合は assigningCategoryStyle イベントを使用します。
例えばこのようにシリーズ内で統一された色を

このように値に応じて変更することができます。ここでは Y の値が80以上の柱を red、20以下の柱をgreen としています。

この機能を使用するには、IgxColumnSeriesComponent の isCustomCategoryStyleAllowed プロパティを true と設定し、assigningCategoryStyle イベントを以下のようにハンドリングします。

<igx-data-chart .....>
      <igx-column-series .....
	         isCustomCategoryStyleAllowed="true"
            (assigningCategoryStyle)="onAssigningCategoryStyle($event)">
      </igx-column-series>
</igx-data-chart>

onAssigningCategoryStyle(event) {
	// 値が80以上の場合はred
	if (event.args.getItems(event.args.startIndex, event.args.endIndex)[0].value1 >= 80) {
	  event.args.fill = "red";
	  event.args.stroke = "red";
	}
	// 値が20以下の場合はgreen
	else if (event.args.getItems(event.args.startIndex, event.args.endIndex)[0].value1 <= 20) {
	  event.args.fill = "green";
	  event.args.stroke = "green";
	}
	// それ以外はそのまま
	else {
	  event.args.fill = event.sender.actualBrush;
	  event.args.stroke = event.sender.actualOutline;
	}
}