This website is for Vega-Lite v4. Go to the main Vega-Lite homepage for the latest release.

Tick

Edit this page 
// Single View Specification
{
  "data": ... ,
  "mark": "tick",
  "encoding": ... ,
  ...
}

The tick mark represents each data point as a short line. This is a useful mark for displaying the distribution of values in a field.

Documentation Overview

Tick Mark Properties

A tick mark definition can contain any standard mark properties and the following special properties:

Property Type Description
cornerRadius Number | ExprRef

The radius in pixels of rounded rectangles or arcs’ corners.

Default value: 0
orient String

The orientation of a non-stacked bar, tick, area, and line charts. The value is either horizontal (default) or vertical. - For bar, rule and tick, this determines whether the size of the bar and tick should be applied to x or y dimension. - For area, this property determines the orient property of the Vega output. - For line and trail marks, this property determines the sort order of the points in the line if config.sortLineBy is not specified. For stacked charts, this is always determined by the orientation of the stack; therefore explicitly specified value will be ignored.

Examples

Dot Plot

For example, the following dot plot uses tick marks to show the distribution of each car’s Horsepower.

Strip Plot

The following strip-plot use tick mark to represent its data.

Tick Config

// Top-level View Specification
{
  ...
  "config": {
    "tick": ...,
    ...
  }
}

The tick property of the top-level config object sets the default properties for all tick marks. If mark property encoding channels are specified for marks, these config values will be overridden.

Besides standard mark config properties, tick config can contain the following additional properties:

Property Type Description
bandSize Number

The width of the ticks.

Default value: 3/4 of step (width step for horizontal ticks and height step for vertical ticks).
thickness Number

Thickness of the tick mark.

Default value: 1

Example Customizing Tick’s Size and Thickness