Bullet Chart Example

<Svg style="width:600px; height:600px;">
     <Chart offset="20 -20 -40 150" axes={{ y: { type: CategoryAxis, vertical: true, inverted: true }, x: { type: NumericAxis, snapToTicks: 0 } }}>
        <Repeater records-bind="$page.points" recordAlias="$point" sorters-bind="$page.sorters">
           <Bar colorIndex={10}
                style="stroke:none;opacity:0.3"
                x-bind="$point.max"
                y-bind="$point.city" />

           <Bar colorIndex={8}
                style="stroke:none;opacity:0.3"
                x-expr="0.8*{$point.max}"
                y-bind="$point.city" />

           <Bar colorIndex={4}
                style="stroke:none;opacity:0.3"
                x-expr="0.6*{$point.max}"
                y-bind="$point.city" />

           <Bar style="fill:#555"
                height={0.2}
                x-bind="$point.value"
                y-bind="$point.city" />

           <Bar style="stroke:red;stroke-width:1px"
                height={0.5}
                x-expr="0.7*{$point.max}"
                x0-expr="0.7*{$point.max}"
                y-bind="$point.city" />

        </Repeater>
        <Gridlines yAxis={false}/>
     </Chart>
  </Svg>