Stacked Bar Chart
This example shows stacked bar chart with multiple stacks.
ControllerChart
<Svg style="width:600px; height:400px;">
<Chart offset="20 -20 -40 40" axes={{ x: { type: CategoryAxis }, y: { type: NumericAxis, vertical: true, snapToTicks: 0 } }}>
<Gridlines/>
<Repeater records-bind="$page.points" recordAlias="$point">
<Column name="V1"
active-bind="$page.v1"
colorIndex={2}
width={0.3}
offset={-0.15}
x-bind="$point.x"
y-bind="$point.v1"
tooltip-tpl="V1 {$point.x} {$point.v1:n}"
stack="v"
stacked />
<Column name="V2"
active-bind="$page.v2"
colorIndex={1}
width={0.3}
offset={-0.15}
x-bind="$point.x"
y-bind="$point.v2"
tooltip-tpl="V2 {$point.x} {$point.v2:n}"
stack="v"
stacked />
<Column name="V3"
active-bind="$page.v3"
colorIndex={0}
width={0.3}
offset={-0.15}
x-bind="$point.x"
y-bind="$point.v3"
tooltip-tpl="V3 {$point.x} {$point.v3:n}"
stack="v"
stacked />
<Column name="A1"
active-bind="$page.a1"
colorIndex={11}
width={0.3}
offset={0.15}
x-bind="$point.x"
y-bind="$point.a1"
tooltip-tpl="A1 {$point.x} {$point.a1:n}"
stack="a"
stacked />
<Column name="A2"
active-bind="$page.a2"
colorIndex={12}
width={0.3}
offset={0.15}
x-bind="$point.x"
y-bind="$point.a2"
tooltip-tpl="A2 {$point.x} {$point.a2:n}"
stack="a"
stacked />
<Column name="A3"
active-bind="$page.a3"
colorIndex={13}
width={0.3}
offset={0.15}
x-bind="$point.x"
y-bind="$point.a3"
tooltip-tpl="A3 {$point.x} {$point.a3:n}"
stack="a"
stacked />
</Repeater>
</Chart>
</Svg>
<Legend />