IgcDataChart を使用して二極分散型積上げ横棒グラフを作成する

IgcDataChart の積層型棒チャートを左右に二つ並べて配置し、二極分散型積上げ横棒グラフを表現することが可能です。

左側の igc-data-chart を作成します。
X 軸は is-inverted を true に設定し、グラフの向きを逆方向にします。Y軸はラベル表示用のものを label-location=”outsideLeft” で定義し、それとは別に label-location=”outsideRight” を設定した Y 軸を追加して label-extent=”0″ に設定し、チャートの右側の余白が 0 になるようにします。

<igc-data-chart id="leftBarChart" width="550px" height="400px">
  <igc-numeric-x-axis id="xAxisLeft" name="xAxisLeft" minimum-value="0" maximum-value="100" is-inverted="true">
  </igc-numeric-x-axis>
  <igc-category-y-axis id="yAxisLeft" name="yAxisLeft" label="Label" label-location="outsideLeft"
	major-stroke-thickness="0" gap=".5"></igc-category-y-axis>
  <igc-category-y-axis id="yAxisDummy" name="yAxisDummy" label="Label" label-location="outsideRight"
	label-extent="0" major-stroke-thickness="0"></igc-category-y-axis>
  <igc-stacked-bar-series id="stackedSeriesLeft" name="stackedSeriesLeft">
	<igc-stacked-fragment-series name="series1" value-member-path="Value1" brush="#FF0461" outline="#FF0461">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series name="series2" value-member-path="Value2" brush="#FF69A3" outline="#FF69A3">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series name="series3" value-member-path="Value3" brush="#FFBEDA" outline="#FFBEDA">
	</igc-stacked-fragment-series>
  </igc-stacked-bar-series>
</igc-data-chart>

同様に右側の igc-data-chart も作成します。
Y 軸はラベル表示用のものを label-location=”outsideRight” で定義し、チャートの左側の余白をなくすために label-location=”outsideLeft” に設定した Y 軸を追加して label-extent=”0″ を設定します。

<igc-data-chart id="rightBarChart" width="550px" height="400px">
  <igc-numeric-x-axis id="xAxisRight" name="xAxisRight" minimum-value="0" maximum-value="100">
  </igc-numeric-x-axis>
  <igc-category-y-axis id="yAxisRight" name="yAxisRight" label="Label" label-location="outsideRight"
	major-stroke-thickness="0" gap=".5"></igc-category-y-axis>
  <igc-category-y-axis id="yAxisDummy" name="yAxisDummy" label="Label" label-location="outsideLeft" label-extent="0"
	major-stroke-thickness="0" label-text-color="transparent"></igc-category-y-axis>
  <igc-stacked-bar-series id="stackedSeriesRight" name="stackedSeriesRight">
	<igc-stacked-fragment-series name="series1" value-member-path="Value1" brush="#005FFF" outline="#005FFF">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series name="series2" value-member-path="Value2" brush="#5D99FF" outline="#5D99FF">
	</igc-stacked-fragment-series>
	<igc-stacked-fragment-series name="series3" value-member-path="Value3" brush="#BAD3FF" outline="#BAD3FF">
	</igc-stacked-fragment-series>
  </igc-stacked-bar-series>
</igc-data-chart>

それぞれの IgcDataChartComponent にデータソースの割り当て、および、IgcStackedBarSeriesComponent に軸の割り当てを行います。

const leftData = [
    { Label: "2005", Value1: 11, Value2: 17, Value3: 25 },
    { Label: "2006", Value1: 15, Value2: 15, Value3: 30 },
    { Label: "2007", Value1: 20, Value2: 10, Value3: 33 },
    { Label: "2008", Value1: 25, Value2: 15, Value3: 28 },
    { Label: "2009", Value1: 34, Value2: 20, Value3: 21 },
    { Label: "2010", Value1: 51, Value2: 13, Value3: 13 },
]

const rightData = [
    { Label: "2005", Value1: 5, Value2: 10, Value3: 23 },
    { Label: "2006", Value1: 10, Value2: 21, Value3: 22 },
    { Label: "2007", Value1: 12, Value2: 19, Value3: 32 },
    { Label: "2008", Value1: 10, Value2: 20, Value3: 28 },
    { Label: "2009", Value1: 22, Value2: 15, Value3: 30 },
    { Label: "2010", Value1: 35, Value2: 25, Value3: 28 },
]

const leftBarChart = document.getElementById('leftBarChart') as IgcDataChartComponent;
leftBarChart.dataSource = leftData;
const stackedSeriesLeft = document.getElementById('stackedSeriesLeft') as IgcStackedBarSeriesComponent;
const xAxisLeft = document.getElementById("xAxisLeft") as IgcNumericXAxisComponent;
const yAxisLeft = document.getElementById("yAxisLeft") as IgcCategoryYAxisComponent;
stackedSeriesLeft.xAxis = xAxisLeft;
stackedSeriesLeft.yAxis = yAxisLeft;

const rightBarChart = document.getElementById('rightBarChart') as IgcDataChartComponent;
rightBarChart.dataSource = rightData;
const stackedSeriesRight = document.getElementById('stackedSeriesRight') as IgcStackedBarSeriesComponent;
const xAxisRight = document.getElementById("xAxisRight") as IgcNumericXAxisComponent;
const yAxisRight = document.getElementById("yAxisRight") as IgcCategoryYAxisComponent;
stackedSeriesRight.xAxis = xAxisRight;
stackedSeriesRight.yAxis = yAxisRight;