Range

import {Range} from 'cx/charts';

The Range component can be used to highlight important zones on the chart.

X Range

Y Range

<div class="widgets" controller={PageController}>
   <Svg style="width:600px; height:400px;">
      <Chart offset="20 -10 -40 40" axes={{ x: { type: NumericAxis }, y: { type: NumericAxis, vertical: true } }}>
         <Gridlines/>
         <Range x1-bind="$page.p1.x" x2-bind="$page.p2.x" colorIndex={11} name="X Range" active-bind="$page.yrange">
            <Text anchors="0 0.5 0 0.5" offset="5 0 0 0" ta="middle" dy="0.8em">X Range</Text>
         </Range>
         <Range y1-bind="$page.p1.y" y2-bind="$page.p2.y" colorIndex={8} name="Y Range" active-bind="$page.xrange">
            <Text anchors="0.5 0 0.5 0" dy="0.4em" dx={5}>Y Range</Text>
         </Range>
         <LineGraph data-bind="$page.points" colorIndex={0}  />
         <Marker colorIndex={11} x-bind="$page.p1.x" size={10} draggableX  />
         <Marker colorIndex={11} x-bind="$page.p2.x" size={10} draggableX  />
         <Marker colorIndex={8} y-bind="$page.p1.y" size={10} draggableY />
         <Marker colorIndex={8} y-bind="$page.p2.y" size={10} draggableY />
      </Chart>
   </Svg>
   <Legend />
</div>

Copied!Cx Fiddle

Examples:

Timeline

Configuration

Property	Description	Type
colorIndex	Index of a color from the standard palette of colors. 0-15.	number
colorMap	Used to automatically assign a color based on the `colorName` and the contextual `ColorMap` widget.	string
colorName	Name used to automatically resolve color based from the contextual `ColorMap` widget. If value is not provided, `name` is used instead.	string
name	Name of the item as it will appear in the legend.	string
x1	The `x1` value binding or expression.	number
x2	The `x2` value binding or expression.	number
xAxis	Name of the horizontal axis. The value should match one of the horizontal axes set in the `axes` configuration of the parent `Chart` component. Default value is `x`.	string
y1	The `y1` value binding or expression.	number
y2	The `y2` value binding or expression.	number
yAxis	Name of the vertical axis. The value should match one of the vertical axes set in the `axes` configuration if the parent `Chart` component. Default value is `y`.	string
active	Used to indicate if an item is active or not. Inactive items are shown only in the legend.	boolean
anchors	Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge. One aligns with the bottom/right edge. See Svg for more information.	string/number/rect
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
constrain	Setting `constrain` to `true` is equivalent to setting both `constrainX` and `constrainY` to `true`.	boolean
constrainX	Constrain the range position during drag operations to min/max values of the X axis.	boolean
constrainY	Constrain the range position during drag operations to min/max values of the Y axis.	boolean
draggable	Set to `true` to make the range draggable along the X and Y axis.	boolean
draggableX	Set to `true` to make the range draggable along the X axis.	boolean
draggableY	Set to `true` to make the range draggable along the Y axis.	boolean
hidden	Set to true to skip rendering of visual elements and only render children instead.	boolean
items children	List of child elements.	array
legend	Name of the legend to be used. Default is `legend`. Set to `false` to hide legend entry for this item.	string \| false
legendAction	Action to be performed if the user clicks on the legend entry. Default value is `auto`. Other permitted values are `toggle` and `select`.	string
legendShape	Shape of the icon in the the legend. Default value is based on the chart type. Additional shapes can be registered using the `registerShape` function. Out of the box, CxJS offers `square`, `bar`, `column`, `line`, `vline` and `triangle` shapes.	string
margin	Apply margin to the given boundaries. See Svg for more information.	string/number/rect
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
offset	Move boundaries specified by the offset. See Svg for more information.	string/number/rect
outerLayout	Defines the outer layout which wraps the widget.	widget
padding	Padding to be applied to the boundaries rectangle before passing to the children.	string/number/rect
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Range