Documentation

Report Edit

Stacked Bar Chart

This example shows stacked bar chart with multiple stacks.

JanFebMarAprMayJunJulAugSepOctNovDec01020304050
V1
V2
V3
A1
A2
A3
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 />
Copied!Cx Fiddle