Bar Chart Example

var legendStyle = "border-width:1px;border-style:solid;display:inline-block;width:20px;height:10px;";
<Svg style="width:600px; height:600px;">
   <Chart offset="20 -20 -40 150" axes={{ y: { type: CategoryAxis, vertical: true, inverted: true }, x: { type: NumericAxis, snapToTicks: 1 } }}>
      <Gridlines/>
      <Repeater records-bind="$page.points" recordAlias="$point" sorters-bind="$page.sorters">
         <Bar colorIndex={0}
              height={0.2}
              offset={-0.2}
              x-bind="$point.v1"
              y-bind="$point.city"
              selection={barSelection}
              tooltip-tpl="{$point.v1:n;0}" />

         <Bar colorIndex={2}
              height={0.2}
              offset={0}
              x-bind="$point.v2"
              y-bind="$point.city"
              selection={barSelection}
              tooltip-tpl="{$point.v2:n;0}" />

         <Bar colorIndex={4}
              height={0.2}
              offset={0.2}
              x-bind="$point.v3"
              y-bind="$point.city"
              selection={barSelection}
              tooltip-tpl="{$point.v3:n;0}" />
      </Repeater>
   </Chart>
</Svg>
<Grid records-bind="$page.points"
      sorters-bind="$page.sorters"
      columns={[
         { header: 'City', field: 'city', sortable: true },
         { field: 'v1', format: 'n;2', align: "right", sortable: true,
            header: {
               items: <cx>
                  <div preserveWhitespace>
                     V1
                     <div class="cxs-color-0" style={legendStyle}></div>
                  </div>
               </cx>
            }
         },
         { field: 'v2', format: 'n;2', align: "right", sortable: true,
            header: {
               items: <cx>
                  <div preserveWhitespace>
                      V2
                      <div class="cxs-color-2" style={legendStyle}></div>
                  </div>
               </cx>
            }
         },
         { field: 'v3', format: 'n;2', align: "right", sortable: true,
            header: {
            items: <cx>
               <div preserveWhitespace>
                   V3
                   <div class="cxs-color-4" style={legendStyle}></div>
               </div>
            </cx>
            }
         }
      ]}
      selection={{type: PropertySelection, keyField: 'id', bind: '$page.selection' }}/>