ValueAtFinder

import {ValueAtFinder} from 'cx/charts';

The ValueAtFinder helper widget is used to read values from the graph at the given position. This widget is commonly used with MouseTracker and tooltips to enable value tooltips for line graphs.

Series 1

Series 2

Series 3

Series 4

Series 5

Stack

Controller Index Columns

    <Svg style="width:600px;height:500px;" offset="10 -10 -20 40">
    <Chart axes={{
        x: <NumericAxis />,
        y: <NumericAxis vertical/>,
    }}>
        <Gridlines />
        <MouseTracker
            x-bind="$page.cursor.x"
            tooltip={{
                destroyDelay: 5,
                createDelay: 5,
                items: <cx>
                    <ColorMap onGetCache="getColorMapCache"/>
                    <Grid
                        defaultSortField="trackedValue"
                        defaultSortDirection="DESC"
                        records-bind="$page.series"
                        columns={columns}
                    />
                </cx>,
                trackMouse: true
            }}
        >
            <MarkerLine visible-expr="!!{$page.cursor}" x-bind="$page.cursor.x" />

            <ColorMap onGetCache="getColorMapCache" />

            <Repeater records-bind="$page.series">
                <ValueAtFinder at-bind="$page.cursor.x" value-bind="$record.trackedValue">
                    <LineGraph name-bind="$record.name"
                        active-bind="$record.active"
                        data-bind="$record.points"
                        colorMap="lines"
                        stacked-bind="$page.stacked"
                        area-bind="$page.stacked"
                    />
                </ValueAtFinder>
                <Marker
                    name-bind="$record.name"
                    active-bind="$record.active"
                    x-bind="$page.cursor.x"
                    y-bind="$record.trackedValue"
                    colorMap="lines"
                    size={10}
                    stackedY-bind="$page.stacked"
                    affectsAxes={false}
                    stack="markers"
                />
            </Repeater>
        </MouseTracker>
    </Chart>
</Svg>
<Legend/>
<Checkbox value-bind="$page.stacked" text="Stack" />

Copied!Cx Fiddle

Configuration

Property	Description	Type
at	X axis probe position.	number
convert	A function used to convert x values (such as dates) into numeric format. Must be defined for proper functioning with `TimeAxis`.	function
onCreatePointFilter	A callback function used to create a predicate for filtering points. Accepts `filterParams` and `instance` as the arguments.	object
value	A binding that receives a measured value.	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
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

ValueAtFinder