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

alpha

Numeric

Demo

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 | ...

exact

Boolean

Demo

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

Demo

Sets the line color of the object.

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

line-gap-size lineGapSize

Mixed

Demo

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

Demo

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

Demo

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

"solid" | "dotted" | "dashed"

line-width lineWidth

Mixed

Demo

Sets the line width of the object.

4 | "6px" | ...

marker

Object

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

Demo

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

{...}

reverse-series reverseSeries

Boolean

Reverses the order of items in plotLabel. Generally used with positive stacked charts.

scale-label scaleLabel

Object

Demo

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

{...}

shared

Boolean

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

trigger

String

Demo

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"

type

String

Demo

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"

visible

Boolean

Demo

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

true | false | 1 | 0