Crosshair

Basic Configuration

The Crosshair component is a special tooltip designed to work in an XYContainer. When a user is interacting with the XYContainer and a crosshair is provided, the Crosshair will appear as a vertical line and render circles on the corresponding y values in the dataset. You can optionally enable a horizontal line with showHorizontalLine (see below).

React

component.tsx

import { VisXYContainer, VisLine, VisAxis, VisAxis, VisCrosshair } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const padding = {
    top: 5,
    bottom: 5
  }
  const x = (d: DataRecord) =>  d.x
  const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]

  return (
    <VisXYContainer padding={padding} data={data}>
      <VisLine x={x} y={y}/>
      <VisAxis type="x"/>
      <VisAxis type="y"/>
      <VisCrosshair/>
    </VisXYContainer>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  padding = {
    top: 5,
    bottom: 5
  }
  x = (d: DataRecord) =>  d.x
  y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
}

template.html

<vis-xy-container [padding]="padding" [data]="data">
  <vis-line [x]="x" [y]="y"></vis-line>
  <vis-axis type="x"></vis-axis>
  <vis-axis type="y"></vis-axis>
  <vis-crosshair></vis-crosshair>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisLine, VisAxis, VisAxis, VisCrosshair } from '@unovis/svelte'

  export let data: DataRecord[]
  const padding = {
    top: 5,
    bottom: 5
  }
  const x = (d: DataRecord) =>  d.x
  const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
</script>

<VisXYContainer {padding} {data}>
  <VisLine {x} {y}/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
  <VisCrosshair/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisLine, VisAxis, VisAxis, VisCrosshair } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const padding = {
    top: 5,
    bottom: 5
  }
const x = (d: DataRecord) =>  d.x
const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]
</script>

<template>
  <VisXYContainer :padding="padding" :data="data">
    <VisLine :x="x" :y="y" />
    <VisAxis type="x" />
    <VisAxis type="y" />
    <VisCrosshair />
  </VisXYContainer>
</template>

Solid

component.tsx

import { VisXYContainer, VisLine, VisAxis, VisAxis, VisCrosshair } from '@unovis/solid'

function Component(props) {
  const data: DataRecord[] = () => props.data
  const padding = {
    top: 5,
    bottom: 5
  }
  const x = (d: DataRecord) =>  d.x
  const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]

  return (
    <VisXYContainer padding={padding} data={data()}>
      <VisLine x={x} y={y}/>
      <VisAxis type="x"/>
      <VisAxis type="y"/>
      <VisCrosshair/>
    </VisXYContainer>
  )
}

TypeScript

component.ts

import { XYContainer, Line, Axis, Crosshair } from '@unovis/ts'
import { data, DataRecord } from './data'

const x = (d: DataRecord) =>  d.x
const y = [
    (d: DataRecord) =>  d.y,
    (d: DataRecord) =>  d.y1,
    (d: DataRecord) =>  d.y2
  ]

const crosshair = new Crosshair<DataRecord>({ })
const container = new XYContainer<DataRecord>(node, {
  padding: {
    top: 5,
    bottom: 5
  }, 
  components: [new Line({ x, y })], 
  xAxis: new Axis({ type: "x" }), 
  yAxis: new Axis({ type: "y" }), 
  crosshair
}, data)

Loading...

X and Y accessors

Like other components in you can supply x and y accessors to the Crosshair component to control where it appears in your container. There's also a dedicated yStacked property for dealing with stacked values.

By default, Crosshair automatically takes the x, y and yStacked settings from XYContainer. But as soon as you manually specify any of them, the component will expect the rest to be provided as well. For example, if you supply the x accessor function to your crosshair you'll also have to supply the y or yStacked settings depending on your chart configuration.

See the following example which moves the position of the crosshair line to the right of each bar.

const x: ((d: DataRecord) => number) = d.x + 0.5
const yStacked: ((d: DataRecord) => number)[] = [d => d.y, d => d.y1, d => d.y2]

React

<VisCrosshair x={x} yStacked={yStacked}/>

Angular

<vis-crosshair [x]="x" [yStacked]="yStacked"></vis-crosshair>

Svelte

<VisCrosshair {x} {yStacked}/>

Vue

<VisCrosshair :x="x" :yStacked="yStacked" />

Solid

<VisCrosshair x={x} yStacked={yStacked}/>

TypeScript

const crosshair = new Crosshair<DataRecord>({ x, yStacked })

Loading...

Snap Mode

When snapToData is enabled (the default), the snapMode property controls how the nearest datum is selected:

• CrosshairSnapMode.X (default): snap along the X axis only. Best for time series, line, and area charts where the crosshair tracks the X position.
• CrosshairSnapMode.XY: snap to the datum closest to the pointer in both X and Y (measured in pixel space). Best for Scatter charts where many points can share similar X values.

When snapMode is CrosshairSnapMode.XY, hideWhenFarFromPointerDistance uses the full 2D distance to the snapped point (so a point that is close in X but far in Y still counts as far away). If forceShowAt is set, snapping falls back to CrosshairSnapMode.X because no pointer Y position is available.

React

<VisCrosshair
  snapMode="xy" 
  showHorizontalLine={true} 
  template={template}
/>

Angular

<vis-crosshair
  snapMode="xy" 
  [showHorizontalLine]="true" 
  [template]="template"
></vis-crosshair>

Svelte

<VisCrosshair snapMode="xy" showHorizontalLine={true} {template}/>

Vue

<VisCrosshair
  snapMode="xy" 
  :showHorizontalLine="true" 
  :template="template"
 />

Solid

<VisCrosshair
  snapMode="xy" 
  showHorizontalLine={true} 
  template={template}
/>

TypeScript

const crosshair = new Crosshair<DataRecord>({
  snapMode: "xy", 
  showHorizontalLine: true, 
  template
})

Loading...

Show/Hide Behavior

By default, the Crosshair component will render if the cursor is within a certain distance in pixels from a valid x value. You can disable this feature using the hideWhenFarFromPointer attribute.

hideWhenFarFromPointer:

React

<VisCrosshair hideWhenFarFromPointer={true}/>

Angular

<vis-crosshair [hideWhenFarFromPointer]="true"></vis-crosshair>

Svelte

<VisCrosshair hideWhenFarFromPointer={true}/>

Vue

<VisCrosshair :hideWhenFarFromPointer="true" />

Solid

<VisCrosshair hideWhenFarFromPointer={true}/>

TypeScript

const crosshair = new Crosshair<DataRecord>({ hideWhenFarFromPointer: true })

Loading...

hideWhenFarFromPointerDistance

Use the hideWhenFarFromPointerDistance attribute with a length (in pixels) that represents how far the cursor can be from the snapped datum before hiding. With the default snapMode of CrosshairSnapMode.X, this is the horizontal distance to the crosshair line; with CrosshairSnapMode.XY, it is the full 2D distance to the snapped point.

hideWhenFarFromPointerDistance:

React

<VisCrosshair hideWhenFarFromPointerDistance={50}/>

Angular

<vis-crosshair [hideWhenFarFromPointerDistance]="50"></vis-crosshair>

Svelte

<VisCrosshair hideWhenFarFromPointerDistance={50}/>

Vue

<VisCrosshair :hideWhenFarFromPointerDistance="50" />

Solid

<VisCrosshair hideWhenFarFromPointerDistance={50}/>

TypeScript

const crosshair = new Crosshair<DataRecord>({ hideWhenFarFromPointerDistance: 50 })

Loading...

visibilityThreshold

The Crosshair is only displayed when at least a fraction of its container is visible in the viewport, which prevents it (and its tooltip) from appearing when the chart is mostly scrolled out of view. Charts that are wider or taller than the viewport may never reach the default ratio of 0.35, so you can lower visibilityThreshold, or set it to 0 to always show the Crosshair regardless of how much of the container is on screen.

visibilityThreshold:

React

<VisCrosshair visibilityThreshold={0.35}/>

Angular

<vis-crosshair [visibilityThreshold]="0.35"></vis-crosshair>

Svelte

<VisCrosshair visibilityThreshold={0.35}/>

Vue

<VisCrosshair :visibilityThreshold="0.35" />

Solid

<VisCrosshair visibilityThreshold={0.35}/>

TypeScript

const crosshair = new Crosshair<DataRecord>({ visibilityThreshold: 0.35 })

Loading...

Horizontal Line

Set showHorizontalLine to true to render a horizontal line in addition to the vertical crosshair. The line is placed at the Y position of the crosshair circle closest to the pointer (i.e. the snapped data point), or follows the pointer when there are no circles to snap to (for example, when snapToData is false).

showHorizontalLine:

React

<VisCrosshair showHorizontalLine={undefined}/>

Angular

<vis-crosshair [showHorizontalLine]="undefined"></vis-crosshair>

Svelte

<VisCrosshair showHorizontalLine={undefined}/>

Vue

<VisCrosshair :showHorizontalLine="undefined" />

Solid

<VisCrosshair showHorizontalLine={undefined}/>

TypeScript

const crosshair = new Crosshair<DataRecord>({ showHorizontalLine: undefined })

Loading...

Custom Color

Provide a string or color accessor function to the color attribute to customize the crosshair's point color:

React

component.tsx

function Component(props) {
  const data: DataRecord[] = props.data
  const color = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]

  return (
    <VisCrosshair color={color}/>
  )
}

Angular

component.ts

@Component({
  template: '<vis-crosshair [color]="color"></vis-crosshair>'
})
export class Component {
  @Input data: DataRecord[];
  color = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
}

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisCrosshair } from '@unovis/svelte'

  export let data: DataRecord[]
  const color = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
</script>

<VisCrosshair {color}/>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisCrosshair } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const color = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
</script>

<template>
  <VisCrosshair :color="color" />
</template>

Solid

component.tsx

function Component(props) {
  const data: DataRecord[] = () => props.data
  const color = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]

  return (
    <VisCrosshair color={color}/>
  )
}

TypeScript

component.ts

const crosshair = new Crosshair<DataRecord>({
  color: (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
})

Loading...

Custom Stroke Color and Width

Provide values or accessor functions to the strokeColor and strokeWidth attributes to customize the crosshair's circle stroke color and width:

React

component.tsx

function Component(props) {
  const data: DataRecord[] = props.data
  const strokeColor = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
  const strokeWidth = (d: DataRecord, i: number) =>  [1, 2, 3][i]

  return (
    <VisCrosshair
      color="none" 
      strokeColor={strokeColor} 
      strokeWidth={strokeWidth}
    />
  )
}

Angular

component.ts

@Component({
  template: `
    <vis-crosshair
      color="none" 
      [strokeColor]="strokeColor" 
      [strokeWidth]="strokeWidth"
    ></vis-crosshair>
  `
})
export class Component {
  @Input data: DataRecord[];
  strokeColor = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
  strokeWidth = (d: DataRecord, i: number) =>  [1, 2, 3][i]
}

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisCrosshair } from '@unovis/svelte'

  export let data: DataRecord[]
  const strokeColor = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
  const strokeWidth = (d: DataRecord, i: number) =>  [1, 2, 3][i]
</script>

<VisCrosshair color="none" {strokeColor} {strokeWidth}/>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisCrosshair } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const strokeColor = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
const strokeWidth = (d: DataRecord, i: number) =>  [1, 2, 3][i]
</script>

<template>
  <VisCrosshair
    color="none" 
    :strokeColor="strokeColor" 
    :strokeWidth="strokeWidth"
   />
</template>

Solid

component.tsx

function Component(props) {
  const data: DataRecord[] = () => props.data
  const strokeColor = (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i]
  const strokeWidth = (d: DataRecord, i: number) =>  [1, 2, 3][i]

  return (
    <VisCrosshair
      color="none" 
      strokeColor={strokeColor} 
      strokeWidth={strokeWidth}
    />
  )
}

TypeScript

component.ts

const crosshair = new Crosshair<DataRecord>({
  color: "none", 
  strokeColor: (d: DataRecord, i: number) =>  ['red', 'green', 'blue'][i], 
  strokeWidth: (d: DataRecord, i: number) =>  [1, 2, 3][i]
})

Loading...

Circle Radius

Use the circleRadius attribute to set the radius of the crosshair circles in pixels. Default value is 4.

circleRadius:

React

<VisCrosshair circleRadius={4}/>

Angular

<vis-crosshair [circleRadius]="4"></vis-crosshair>

Svelte

<VisCrosshair circleRadius={4}/>

Vue

<VisCrosshair :circleRadius="4" />

Solid

<VisCrosshair circleRadius={4}/>

TypeScript

const crosshair = new Crosshair<DataRecord>({ circleRadius: 4 })

Loading...

Adding a Tooltip

You can render text content for your Crosshair component by providing it with a template property and a Tooltip component within the same container.

React

component.tsx

import { VisXYContainer, VisScatter, VisTooltip, VisAxis, VisAxis, VisCrosshair } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const padding = {
    top: 5,
    bottom: 5
  }
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y
  const template = (d: DataRecord) =>  [d.x, d.y].join(', ')

  return (
    <VisXYContainer padding={padding} data={data}>
      <VisScatter x={x} y={y}/>
      <VisTooltip/>
      <VisAxis type="x"/>
      <VisAxis type="y"/>
      <VisCrosshair template={template}/>
    </VisXYContainer>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  padding = {
    top: 5,
    bottom: 5
  }
  x = (d: DataRecord) =>  d.x
  y = (d: DataRecord) =>  d.y
  template = (d: DataRecord) =>  [d.x, d.y].join(', ')
}

template.html

<vis-xy-container [padding]="padding" [data]="data">
  <vis-scatter [x]="x" [y]="y"></vis-scatter>
  <vis-tooltip></vis-tooltip>
  <vis-axis type="x"></vis-axis>
  <vis-axis type="y"></vis-axis>
  <vis-crosshair [template]="template"></vis-crosshair>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisScatter, VisTooltip, VisAxis, VisAxis, VisCrosshair } from '@unovis/svelte'

  export let data: DataRecord[]
  const padding = {
    top: 5,
    bottom: 5
  }
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y
  const template = (d: DataRecord) =>  [d.x, d.y].join(', ')
</script>

<VisXYContainer {padding} {data}>
  <VisScatter {x} {y}/>
  <VisTooltip/>
  <VisAxis type="x"/>
  <VisAxis type="y"/>
  <VisCrosshair {template}/>
</VisXYContainer>

Vue

component.vue

<script setup lang="ts">
import { VisXYContainer, VisScatter, VisTooltip, VisAxis, VisAxis, VisCrosshair } from '@unovis/vue'

const props = defineProps<{ data: DataRecord[] }>()
const padding = {
    top: 5,
    bottom: 5
  }
const x = (d: DataRecord) =>  d.x
const y = (d: DataRecord) =>  d.y
const template = (d: DataRecord) =>  [d.x, d.y].join(', ')
</script>

<template>
  <VisXYContainer :padding="padding" :data="data">
    <VisScatter :x="x" :y="y" />
    <VisTooltip />
    <VisAxis type="x" />
    <VisAxis type="y" />
    <VisCrosshair :template="template" />
  </VisXYContainer>
</template>

Solid

component.tsx

import { VisXYContainer, VisScatter, VisTooltip, VisAxis, VisAxis, VisCrosshair } from '@unovis/solid'

function Component(props) {
  const data: DataRecord[] = () => props.data
  const padding = {
    top: 5,
    bottom: 5
  }
  const x = (d: DataRecord) =>  d.x
  const y = (d: DataRecord) =>  d.y
  const template = (d: DataRecord) =>  [d.x, d.y].join(', ')

  return (
    <VisXYContainer padding={padding} data={data()}>
      <VisScatter x={x} y={y}/>
      <VisTooltip/>
      <VisAxis type="x"/>
      <VisAxis type="y"/>
      <VisCrosshair template={template}/>
    </VisXYContainer>
  )
}

TypeScript

component.ts

import { XYContainer, Scatter, Tooltip, Axis, Crosshair } from '@unovis/ts'
import { data, DataRecord } from './data'

const x = (d: DataRecord) =>  d.x
const y = (d: DataRecord) =>  d.y

const crosshair = new Crosshair<DataRecord>({
  template: (d: DataRecord) =>  [d.x, d.y].join(', ')
})
const container = new XYContainer<DataRecord>(node, {
  padding: {
    top: 5,
    bottom: 5
  }, 
  components: [new Scatter({ x, y })], 
  tooltip: new Tooltip({ }), 
  xAxis: new Axis({ type: "x" }), 
  yAxis: new Axis({ type: "y" }), 
  crosshair
}, data)

Loading...

CSS Variables

The Crosshair component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css

.visualization-container-div {
  --vis-crosshair-line-stroke-color: #f88080;
  --vis-crosshair-line-stroke-dasharray: 8 4;
  --vis-crosshair-circle-stroke-color: #000000;
}

Loading...

All supported CSS variables and their default values

--vis-crosshair-line-stroke-color: #888;
--vis-crosshair-line-stroke-width: 1px;
--vis-crosshair-line-stroke-opacity: 1;
--vis-crosshair-line-stroke-dasharray: none;
--vis-crosshair-circle-stroke-color: #fff;
--vis-crosshair-circle-stroke-width: 1px;
--vis-crosshair-circle-stroke-opacity: 0.75;

Component Props

Name	Type	Description
* required property