IgcDataChart の積層型チャートで特定の項目をハイライトする

IgcDataChart では、バージョン 7.0.0 より積層型チャートにおいても assigningCategoryStyle イベントがサポートされるようになりました。
assigningCategoryStyle イベントを使用して積層型棒チャートや積層型縦棒チャートの特定の項目の色を変更することができます。

このような積層型縦棒チャートがあるとき、

Value2 シリーズの “Item D” の項目のみ色を変更することができます。

<igc-data-chart id="stackedColumnChart" width="800px" height="500px">
  <igc-category-x-axis id="xAxis" name="xAxis" label="Label" gap=".5"></igc-category-x-axis>
  <igc-numeric-y-axis id="yAxis" name="yAxis" minimum-value="0" maximum-value="200">
  </igc-numeric-y-axis>
  <igc-stacked-column-series name="series1" x-axis-name="xAxis" y-axis-name="yAxis">
	<igc-stacked-fragment-series id="value1Series" name="value1Series" title="Value1" value-member-path="Value1">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value2Series" name="value2Series" title="Value2" value-member-path="Value2">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value3Series" name="value3Series" title="Value3" value-member-path="Value3">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value4Series" name="value4Series" title="Value4" value-member-path="Value4">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series id="value5Series" name="value5Series" title="Value5" value-member-path="Value5">
	</igc-stacked-fragment-series>
  </igc-stacked-column-series>
</igc-data-chart>

Value2 シリーズの IgcStackedFragmentSeriesComponent の isCustomCategoryStyleAllowed プロパティをtrue と設定し、assigningCategoryStyle イベントを以下のようにハンドルします。

const value2Series = document.getElementById('value2Series') as IgcStackedFragmentSeriesComponent;

// Value2 シリーズの "Item D" を yellow にする
value2Series.isCustomCategoryStyleAllowed = true;
value2Series.assigningCategoryStyle = (s : IgcStackedFragmentSeriesComponent, e : IgcAssigningCategoryStyleEventArgs) => {
  if (e.getItems(e.startIndex, e.endIndex)[0].Label === "Item D") {
    e.fill = "yellow";
    e.stroke = "yellow";
  }
}

応用として、特定の項目以外を透過させることによって項目をハイライトすることも可能です。

// Value2 シリーズの "Item D" 以外は opacityを0.5にする
value2Series.assigningCategoryStyle = (s : IgcStackedFragmentSeriesComponent, e : IgcAssigningCategoryStyleEventArgs) => {
  if (e.getItems(e.startIndex, e.endIndex)[0].Label !== "Item D") {
    e.opacity = 0.5;
  }
}