# Using custom time axis tick labels instead of timestamps.

**URL:** <https://talk.observablehq.com/t/using-custom-time-axis-tick-labels-instead-of-timestamps/5832>\
**Category:** Help\
**Created:** [November 17, 2021, 10:20pm UTC](https://talk.observablehq.com/t/using-custom-time-axis-tick-labels-instead-of-timestamps/5832 "2021-11-17T22:20:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![belmarca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/belmarca/32/5788_2.png) [@belmarca](https://talk.observablehq.com/u/belmarca)\
**Post date:** [November 17, 2021, 10:20pm UTC](https://talk.observablehq.com/t/using-custom-time-axis-tick-labels-instead-of-timestamps/5832/1 "2021-11-17T22:20:59Z")

</div>

Hi,

I would like to know if it is possible to produce such axes in Observable Plot as could be done in pure `d3` like

```auto
const margin = {top: 20, right: 10, bottom: 20, left: 10};
const width = chartDiv.offsetWidth - margin.left - margin.right,
      height = chartDiv.offsetHeight - margin.top - margin.bottom;
const g = d3.select("#chart").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

let xScale = d3.scaleTime()
               .domain([start, end])
               .range([0, width]);
let xAxisGenerator = d3.axisBottom(xScale)
                       .ticks(nTicks)
                       .tickValues(tickValues)
                       .tickFormat(textFromValue);
let xAxis = g.append("g")
              .call(xAxisGenerator)
              .selectAll("text")
              .style("text-anchor", "start")
              .attr("dx", ".8em")
              .attr("dy", "-5px")
              .attr("transform", function(d) {
                return "rotate(90)"
              });

```

which produces the following image:

 ![Custom axis in d3js](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/59b79f7acaff9fbf06aea5f148c39f8fc5fc7820.png "Custom axis in d3js")

I have found this is very easy to do in `d3` but not in higher level libraries. Can (how) this be done in `Plot`?

---

<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:** [November 18, 2021, 4:48am UTC](https://talk.observablehq.com/t/using-custom-time-axis-tick-labels-instead-of-timestamps/5832/2 "2021-11-18T04:48:52Z")

</div>

you might be able to use the ticks and tickFormat options of the x axis, like so:

 ![Capture d’écran 2021-11-18 à 05.47.49](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/911d6b38f8c256b318b57c139535f416a7aaf949.png)

[https://observablehq.com/@d3/d3-releases-timeline](https://observablehq.com/@d3/d3-releases-timeline)

---

<div class="post-metadata">

**Author:** ![belmarca](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/belmarca/32/5788_2.png) [@belmarca](https://talk.observablehq.com/u/belmarca)\
**Post date:** [November 18, 2021, 3:54pm UTC](https://talk.observablehq.com/t/using-custom-time-axis-tick-labels-instead-of-timestamps/5832/3 "2021-11-18T15:54:26Z")

</div>

Hi Fil, this solution works. Thanks a lot!