ScatterGraph

import {ScatterGraph} from 'cx/charts';

The ScatterGraph widget is used for rendering scatter graphs.

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/>
         <ScatterGraph data-bind="$page.reds"
                     name="Reds"
                     colorIndex={1}
                     shape="square"
                     sizeField="size"
                     active-bind="$page.showReds"
         />

         <ScatterGraph data-bind="$page.blues"
                     name="Blues"
                     colorIndex={5}
                     sizeField="size"
                     active-bind="$page.showBlues"
         />

      </Chart>
   </Svg>
   <Legend vertical />
</div>

Copied!Cx Fiddle

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
data	Data for the graph. Each entry should be an object with at least two properties whose names should match the `xField` and `yField` values.	array
name	Name of the item as it will appear in the legend.	string
size	Size (width) of the column in axis units.	number
sizeField	Name of the property which holds the size value. Do not set if `size` is used.	string \| false
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
xField	Name of the property which holds the x value. Default value is `x`.	string
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
yField	Name of the property which holds the y value. 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
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
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object

Documentation

ScatterGraph