# 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```
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"}))
]
})
```

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

```
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])
]
})
```

```
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```
Plot.plot({
x: {domain: [-4, 4]},
marks: [
Plot.tickX({length: 500}, {x: d3.randomNormal(), strokeOpacity: 0.2})
]
})
```

```
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*)

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

`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*)

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

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