# Plot: Conditionally color ticks/axis text?

**URL:** <https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282>\
**Category:** Help\
**Created:** [February 24, 2022, 1:31am UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282 "2022-02-24T01:31:37Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 24, 2022, 1:31am UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282/1 "2022-02-24T01:31:37Z")

</div>

I’m looking for options to change color of Tick Mark & Tick Text ([Tick Mark / Observable Plot / Observable / Observable](https://observablehq.com/@observablehq/plot-tick?collection=@observablehq/plot)) based on conditions in tickformat. Is there option to realize this?

I could not find answers in github, talk and stackoverflow.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [February 24, 2022, 7:36am UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282/2 "2022-02-24T07:36:26Z")

</div>

There is no baked-in solution in Plot, but you can modify the svg with d3:

> **[Variable tick color](https://observablehq.com/@fil/variable-tick-color)**
>
> https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [February 24, 2022, 12:11pm UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282/3 "2022-02-24T12:11:08Z")

</div>

Selection via the new `aria-label` - awesome!!

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [February 24, 2022, 12:32pm UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282/4 "2022-02-24T12:32:56Z")

</div>

I’ve added a second example which uses only css.

---

<div class="post-metadata">

**Author:** ![kadale](https://avatars.discourse-cdn.com/v4/letter/k/8c91f0/32.png) [@kadale](https://talk.observablehq.com/u/kadale)\
**Post date:** [February 24, 2022, 3:14pm UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282/5 "2022-02-24T15:14:01Z")

</div>

Works perfectly. 👍  
Thanks a lot.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [February 24, 2022, 5:19pm UTC](https://talk.observablehq.com/t/plot-conditionally-color-ticks-axis-text/6282/6 "2022-02-24T17:19:11Z")

</div>

You can also render the ticks yourself using a tick and a text mark (and some manual positioning):

 ![untitled (7)](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/c/c0ebc89b9d4cbf5c8319971873057e3bfe3a30f9.png)

```nohighlight
Plot.plot({
  x: { domain: [0, 1], ticks: [] },
  marks: [
    Plot.dotX(Array.from({ length: 100 }, Math.random)),
    Plot.tickX(d3.ticks(0, 1, 10), { stroke: x => x, dy: 6, insetTop: 23 }),
    Plot.textX(d3.ticks(0, 1, 10), { fill: x => x, dy: 16, text: x => x.toFixed(1), frameAnchor: "bottom" })
  ]
})

```