Marker

import {Marker} from 'cx/charts';

Markers are commonly used for scatter charts.

Reds

Blues

<div class="widgets" controller={PageController}>
   <Svg style="width:500px; height:400px;">
      <Chart offset="20 -20 -40 130" axes={{
         x: { type: NumericAxis, snapToTicks: 1 },
         y: { type: NumericAxis, vertical: true, snapToTicks: 1 }
      }}>
         <Gridlines/>
         <Repeater records-bind="$page.reds" recordAlias="$point">
            <Marker colorIndex-bind="$point.color"
                  legendColorIndex={1}
                  active-bind="$page.showReds"
                  name="Reds"
                  size-bind="$point.size"
                  x-bind="$point.x"
                  y-bind="$point.y"
                  tooltip-tpl="Red ({$point.x:n;0}, {$point.y:n;0})"
                  style={{fillOpacity: 0.5}}
                  draggableX
                  draggableY
                  shape="rect"
                  rx="3"
            />
         </Repeater>
         <Repeater records-bind="$page.blues" recordAlias="$point">
            <Marker colorIndex-bind="$point.color"
                  legendColorIndex={5}
                  active-bind="$page.showBlues"
                  name="Blues"
                  size-bind="$point.size"
                  x-bind="$point.x"
                  y-bind="$point.y"
                  tooltip-tpl="Blue ({$point.x:n;0}, {$point.y:n;0})"
                  style={{fillOpacity: 0.5}}
                  draggableX
                  draggableY
              />
         </Repeater>
      </Chart>
   </Svg>
   <Legend vertical />
</div>

Copied!Cx Fiddle

Configuration

Property	Description	Type
affectsAxes	Used to indicate if the data should affect axis span.	boolean
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
shape	Shape kind. `circle`, `square`, `triangle`, etc.	string
size	Size of the shape in pixels.	number
x	The `x` value binding or expression.	string/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
y	The `y` value binding or expression.	string/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
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	When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true.	boolean
constrainX	Constrain the marker position to min/max values of the X axis during drag operations.	boolean
constrainY	Constrain the marker position to min/max values of the Y axis during drag operations.	boolean
draggable	Set to `true` to make the shape draggable along the X and Y axis.	boolean
draggableX	Set to `true` to make the shape draggable along the X axis.	boolean
draggableY	Set to `true` to make the shape draggable along the Y axis.	boolean
hidden	Set to `true` to make the shape draggable along the X axis.	boolean
items children	List of child elements.	array
layout	Define an inner layout.	string/object
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
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
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
rx	Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to `ry` if `ry` is specified.	string/number
ry	Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to `rx` if `rx` is specified.	string/number
stack	Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`.	string
stackedX	Indicate that markers should be stacked horizontally. Default value is `false`.	boolean
stackedY	Indicate that markers should be stacked vertically. Default value is `false`.	boolean
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

Marker