SnapPointFinder

import {SnapPointFinder} from 'cx/charts';

The SnapPointFinder helper is used to find a point on the graph near the cursor. Tracked information is used for displaying visual helpers such as lines, markers and tooltips.

Controller Chart

<Svg style="width:600px;height:500px;" margin="60 60 60 60" controller={ChartController}>
    <Chart axes={{
        x: <NumericAxis />,
        y: <NumericAxis vertical min={0} max={400} />,
    }}>
        <MouseTracker x-bind="$page.cursor.x" y-bind="$page.cursor.y">
            <Gridlines />
            <SnapPointFinder
                cursorX-bind="$page.cursor.x"
                snapX-bind="$page.snapX"
                snapY-bind="$page.snapY"
                maxDistance={Infinity}
            >
                <LineGraph data-bind="$page.data" colorIndex={5} />
            </SnapPointFinder>
            <MarkerLine x-bind="$page.snapX" />
            <Marker
                x-bind="$page.snapX"
                y-bind="$page.snapY"
                colorIndex={5} size={10}
                tooltip={{
                    alwaysVisible: true,
                    text: { tpl: "({$page.snapX:n;2}, {$page.snapY:n;2})"},
                    placement: 'up',
                    destroyDelay: 0,
                    createDelay: 0
                }}
            />
            <Marker
                style="visibility: hidden"
                x-bind="$page.snapX"
                tooltip={{
                    alwaysVisible: true,
                    text: { tpl: "({$page.snapX:n;2}, {$page.snapY:n;2})"},
                    placement: 'right',
                    destroyDelay: 0,
                    createDelay: 0,
                    trackMouseY: true,
                    globalMouseTracking: true
                }}
            />
        </MouseTracker>
    </Chart>
</Svg>

Copied!Cx Fiddle

Configuration

Property	Description	Type
convertX	A function used to convert `x` values (such as dates) into numeric format. Must be defined for proper functioning with `TimeAxis`.	function
convertY	A function used to convert `y` values (such as dates) into numeric format. Must be defined for proper functioning with `TimeAxis`.	function
cursorX	Cursor X position. Commonly obtained by using a parent MouseTracker component.	number
cursorY	Cursor Y position. Commonly obtained by using a parent MouseTracker component.	number
onCreatePointFilter	A callback function used to create a predicate for filtering points. Accepts `filterParams` and `instance` as the arguments.	object
snapRecord	A binding used to receive full data of the point nearest to the cursor.	record
snapX	A binding used to receive the `x` coordinate of the point nearest to the cursor.	string \| number
snapY	A binding used to receive the `y` coordinate of the point nearest to the cursor.	string \| number
filterParams	Parameters which will be passed to the `onCreatePointFilter` callback.	object
items children	List of child elements.	array
layout	Define an inner layout.	string/object
maxDistance	Maximum distance between cursor and the snap point. Default value is `50`. Adjust accordingly for large distances, e.g. set to `Infinity` when using `TimeAxis`.	number
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
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

SnapPointFinder