# Tick mark ​

TIP

The tick mark is one of two marks in Plot for drawing horizontal or vertical lines; it should be used when the secondary position dimension, if any, is ordinal. When it is quantitative, use a rule.

The tick mark comes in two orientations: tickY draws a horizontal↔︎ line with a given y value, while tickX draws a vertical↕︎ line with a given x value. Ticks have an optional secondary position dimension (x for tickY and y for tickX); this second dimension is ordinal, unlike a rule, and requires a corresponding band scale.

Ticks are often used to show one-dimensional distributions, as in the “barcode” plot below showing the proportion of the population in each age bracket across U.S. states.

Fork
js
``````Plot.plot({
x: {
grid: true,
label: "Population (%)",
percent: true
},
y: {
domain: stateage.ages, // in age order
reverse: true,
label: "Age (years)",
labelAnchor: "top"
},
marks: [
Plot.ruleX([0]),
Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age"}))
]
})``````

Both ticks and bars have an ordinal secondary position dimension; a tick is therefore convenient for stroking the upper bound of a bar for emphasis, as in the bar chart below. A separate rule is also used to denote y = 0.

Fork
js
``````Plot.plot({
x: {label: null},
y: {percent: true},
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", fillOpacity: 0.2}),
Plot.tickY(alphabet, {x: "letter", y: "frequency"}),
Plot.ruleY([0])
]
})``````

When there is no secondary position dimension, a tick behaves identically to a rule. While a one-dimensional rule and tick are equivalent, a one-dimensional rule is generally preferred, if only because the name “rule” is more descriptive. But as an example below, a random normal distribution is plotted below with ticks.

Fork
js
``````Plot.plot({
x: {domain: [-4, 4]},
marks: [
Plot.tickX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2})
]
})``````

TIP

Reducing opacity allows better perception of density when ticks overlap.

Ticks are also used by the box mark to denote the median value for each group.

## Tick options ​

For the required channels, see tickX and tickY. The tick mark supports the standard mark options, including insets, and marker options to add a marker (such as a dot or an arrowhead) to the start or end of the rule. The stroke defaults to currentColor.

## tickX(data, options) ​

js
``Plot.tickX(stateage, {x: "population", y: "age"})``

Returns a new vertical↕︎ tick with the given data and options. The following channels are required:

• x - the horizontal position; bound to the x scale

The following optional channels are supported:

• y - the vertical position; bound to the y scale, which must be band

If the y channel is not specified, the tick will span the full vertical extent of the frame.

## tickY(data, options) ​

js
``Plot.tickY(stateage, {y: "population", x: "age"})``

Returns a new horizontal↔︎ tick with the given data and options. The following channels are required:

• y - the vertical position; bound to the y scale

The following optional channels are supported:

• x - the horizontal position; bound to the x scale, which must be band

If the x channel is not specified, the tick will span the full vertical extent of the frame.

Resources
Observable