graph » crosshair

crosshair-x, crosshair-y

[ root » graph » crosshair-x, crosshair-y ]

Crosshairs are interactive labels that appear when users hover over the data points (or node values) on your chart. They can appear against the x- and/or y-axis, and are highly customizable. Crosshairs are much more efficient and performant compared to chart tooltips. Refer to the Crosshairs Tutorial for more information.


AttributeTypeInfo
alphaNumeric

Sets the transparency of the object. Values must range between 0.0 and 1.0, with 0.0 being completely invisible and 1.0 being completely opaque. Please note that values also require the leading 0 before the decimal.

0.3 | 0.9 | ...

exactBoolean

X-Axis Crosshairs Only: When true, plot nodes will be highlighted only when the guide is directly next to the node. When false (the default setting), the plot nodes closest to the guide will be highlighted.

true | false | 1 | 0

line-color
lineColor
String

Sets the line color of the object.

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

line-gap-size
lineGapSize
Mixed

Can be used to create custom dashed or dotted lines when used with line-segment-size. This will control the size of the gaps between each line segment.

4 | "6px" | ...

line-segment-size
lineSegmentSize
Mixed

Can be used to create custom dashed or dotted lines when used with line-gap-size. This will control the size of the visible segment of line.

4 | "6px" | ...

line-style
lineStyle
String

Sets the style applied to lines and borders of the object.

"solid" | "dotted" | "dashed"

line-width
lineWidth
Mixed

Sets the line width of the object.

4 | "6px" | ...

markerObject

X-Axis Crosshairs Only: Using the "marker" object in "crosshair-x" allows you to style markers that activate when users hover over the applicable node index.

{...}

plot-label
plotLabel
Object

X-Axis Crosshairs Only: Sets the definition for the crosshair-x plot labels.

{...}

reverse-series
reverseSeries
BooleanReverses the order of items in plotLabel. Generally used with positive stacked charts.
scale-label
scaleLabel
Object

Sets the definition for the crosshair-x and crosshair-y scale labels.

{...}

sharedBoolean

X-Axis Crosshairs Only: For graphsets with multiple chart objects, setting the attribute to true in "crosshair-x" will allow you to use crosshairs across all charts simultaneously.

true | false | 1 | 0

triggerString

X-Axis Crosshairs Only: Sets the mode used to display crosshair plot-labels. When set to "move" (the default setting), plot-labels for all nodes will be displayed. The "hover" setting will allow only one plot-label to be displayed at a time, with the visibility of each label being triggered when the user hovers over a node.

"move" | "hover"

typeString

Y-Axis Crosshairs Only: Sets the type of the "crosshair-y", either in single mode (one line for all scales) or multiple (a line for every plot).

"single" | "multiple"

visibleBoolean

Sets the visibility of the object. Allows you to turn off the object without removing lines of JSON.

true | false | 1 | 0