# How to sort ticks on the x-axis

**URL:** <https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077>\
**Category:** Help\
**Created:** [January 14, 2022, 4:24pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077 "2022-01-14T16:24:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![anneke](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@anneke](https://talk.observablehq.com/u/anneke)\
**Post date:** [January 14, 2022, 4:24pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/1 "2022-01-14T16:24:36Z")

</div>

Hi there,

A while ago I was asked to make a “temporary” graph for a website, and it turns out it wasn’t so temporary after all, which now landed me in a mess with weeknumbers and years. To summarize and not drag you into it, it comes down to the question: in what way can you sort ticks, besides the default alphabetic order?

So I have an array with all my ticks on the X-axis:

```auto
x: { 
      label: "Week number →",
      labelAnchor: 'right',  
      ticks: ['12', '14', '16', '18', '20', '22', '24', '26', '28', '30', '32', '34', '36', '38', '40', '42', '44', '46', '48', '50', '52', '02', '04'],
      tickSize: 0, 
},

```

As you can see I only want to show even week numbers, but I’m going from the data from 2021 to 2022. Unfortunately, the ticks seem to be sorted alphabetically, which means the ‘02’ and ‘04’ ticks get shown all the way on the left before ‘12’, ‘14’ and the rest, which makes my graph get out of order:

```auto
// x-axis:
02, 04, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32 .... // you get the gist :)

```

I couldn’t find anything helpful on this in the API (on Github) or any of the tutorials that came up in Google for Observable Plot. Does anyone have a lead or the knowledge on how to do this? Thanks in advance. I’ve had a really rough year and this issue, as small as it may be, is giving me a lot of stress, so you’d really be helping a colleague out 😭

---

<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:** [January 14, 2022, 4:46pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/2 "2022-01-14T16:46:14Z")

</div>

try maybe `x: { type: "ordinal", domain: ['12', '14', '16', '18', '20', '22', '24', '26', '28', '30', '32', '34', '36', '38', '40', '42', '44', '46', '48', '50', '52', '02', '04'] }`

---

<div class="post-metadata">

**Author:** ![anneke](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@anneke](https://talk.observablehq.com/u/anneke)\
**Post date:** [January 15, 2022, 11:59am UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/3 "2022-01-15T11:59:54Z")

</div>

Hi Fil, thanks for taking a look! Unfortunately that didn’t do what I expected, but it _did_ trigger me to look into the domain property (not sure of the terminology ‘property’), and I got something working with dates. **Thank you so much!**

For future readers of this, I have not found out any way to sort or order the ticks array, and it still seems to get overwritten and ordered alphabetically. I’ve now resorted to changing from weeknumbers as ticks on my x-axis to month labels, in this example getting every third month between the dates of 28th of march 2021 to today.

```auto
ticks: d3.utcMonth.every(3),
domain: [new Date("2021-03-28"), new Date("2022-01-01")],

```

---

<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:** [January 15, 2022, 12:27pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/4 "2022-01-15T12:27:06Z")

</div>

Can you can share the original chart, so I can take a look in context?

---

<div class="post-metadata">

**Author:** ![anneke](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@anneke](https://talk.observablehq.com/u/anneke)\
**Post date:** [January 15, 2022, 2:03pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/5 "2022-01-15T14:03:28Z")

</div>

Yes, it’s here (I’m not really proud of it, but I needed something that’d get the work done a few weeks ago):

> <https://github.com/minvws/nl-covid19-coronacheck-website/blob/main/generate-statistics-graphic.html>

---

<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:** [January 15, 2022, 2:24pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/6 "2022-01-15T14:24:14Z")

</div>

It seems to work if you use `domain: CC_downloads_plot.map((d) => d.weeknr)`.

---

<div class="post-metadata">

**Author:** ![anneke](https://avatars.discourse-cdn.com/v4/letter/a/41988e/32.png) [@anneke](https://talk.observablehq.com/u/anneke)\
**Post date:** [January 15, 2022, 5:57pm UTC](https://talk.observablehq.com/t/how-to-sort-ticks-on-the-x-axis/6077/7 "2022-01-15T17:57:45Z")

</div>

Wow, thank you so much for your help Fil! ❤