Documentation

Report Edit

Normalized Stacked Bar Chart

This example shows a normalized stacked bar chart.

2000200120022003200420052006200720082009201020112012201320140%20%40%60.00000000000001%80%100%
V1
V2
V3
<Svg style="width:600px; height:400px;">
   <Chart offset="20 -20 -40 40" axes={{
         x: CategoryAxis,
         y: { type: NumericAxis, vertical: true, normalized: true, format: 'p' }
      }}>
      <Gridlines/>
      <Repeater records-bind="$page.points" recordAlias="$point">
         <Column name="V1"
                 active-bind="$page.v1"
                 colorIndex={0}
                 x-bind="$point.x"
                 y-bind="$point.v1"
                 tooltip-tpl="V1 {$point.x} {$point.v1:n}"
                 stacked />

         <Column name="V2"
                 active-bind="$page.v2"
                 colorIndex={2}
                 x-bind="$point.x"
                 y-bind="$point.v2"
                 tooltip-tpl="V2 {$point.x} {$point.v2:n}"
                 stacked />

         <Column name="V3"
                 active-bind="$page.v3"
                 colorIndex={4}
                 x-bind="$point.x"
                 y-bind="$point.v3"
                 tooltip-tpl="V3 {$point.x} {$point.v3:n}"
                 stacked />

      </Repeater>
   </Chart>          
</Svg>
<Legend />
Copied!Cx Fiddle