RangeMarker

import {RangeMarker} from 'cx/charts';

The RangeMarker widget is used to display a range markers on column or bar charts.

<div class="widgets" controller={PageController}>
   <Svg style="width:600px; height:400px;">
      <Chart
         offset="20 -20 -40 40"
         axes={{
            x: { type: CategoryAxis },
            y: { type: NumericAxis, vertical: true },
         }}
      >
         <Gridlines />
         <Repeater records-bind="$points" recordAlias="$point">
            <Column
               colorIndex={12}
               size={0.7}
               offset={0}
               x:bind="$point.v1"
               y:bind="$point.v2"
               tooltip:tpl="{$point.v1} {$point.v2:n;2}"
            />
            <RangeMarker
               x-bind="$point.v1"
               y-bind="$point.max"
               lineStyle="stroke: blue;"
               size={0.7}
               inflate={3}
               shape="max"
            />
            <RangeMarker
               x-bind="$point.v1"
               y-bind="$point.min"
               lineStyle="stroke: red;"
               size={0.7}
               inflate={3}
               shape="min"
            />
            <RangeMarker
               x-bind="$point.v1"
               y-bind="$point.optimal"
               lineStyle="stroke: green;"
               size={0.7}
               inflate={3}
               shape="line"
            />
         </Repeater>
      </Chart>
   </Svg>
   <Svg style="width:600px; height:400px;">
      <Chart
         offset="20 -20 -40 40"
         axes={{
            x: { type: NumericAxis, snapToTicks: 0 },
            y: { type: CategoryAxis, vertical: true, snapToTicks: 1 },
         }}
      >
         <Gridlines />
         <Repeater records-bind="$points" recordAlias="$point">
            <Bar
               colorIndex={13}
               size={0.7}
               offset={0}
               x:bind="$point.v2"
               y:bind="$point.v1"
               tooltip:tpl="{$point.v1} {$point.v2:n;2}"
            />
            <RangeMarker
               y-bind="$point.v1"
               x-bind="$point.max"
               lineStyle="stroke: red;"
               size={0.7}
               shape="max"
               inflate={3}
               vertical
            />
            <RangeMarker
               y-bind="$point.v1"
               x-bind="$point.min"
               lineStyle="stroke: blue;"
               size={0.7}
               shape="min"
               inflate={3}
               vertical
            />
            <RangeMarker
               y-bind="$point.v1"
               x-bind="$point.optimal"
               lineStyle="stroke: green;"
               size={0.7}
               shape="line"
               inflate={3}
               vertical
            />
         </Repeater>
      </Chart>
   </Svg>
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
shape	The shape of marker, Could be `min`, `max`, `line`. Default to `line.`	string
size	Size of the range marker.	number
vertical	Switch to vertical mode.	boolean
x	The `x` value binding or expression.	number
y	The `y` value binding or expression.	number
capSize	Size of vertical or horizontal caps.	number
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
inflate	Inflate the range marker.	number
laneOffset	The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability.	number
lineClass	Class object applied to the range marker.	string/object
lineStyle	Style object applied to the range marker.	string/object
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object

Documentation

RangeMarker