Preserve heights order of the rectangles when I use time based axis

I am working on this project where I defined the following scales as follows:

  "scales": [
    {
      "name": "xtime",
      "type": "band",
      "range":"width",
      "round": true,
      "domain": {"data": "events", "field": "hr"}
    },
    {
      "name": "txtheight",
      "type": "ordinal",
      "domain": {"data": "events", "field": "hr"},
      "range": [20,	60,	180,	220, 100,	140,	260,	300,	420,	460,	340,	380]
    }
  ],

and the following mark

{
  "type": "rect",
  "from": {"data": "events"},
  "encode": {
    "enter": {
      "x": {"scale": "xtime","field": "hr"},
      "y": {"value": 0},
      "width": {"value": 2},
      "height": {"scale": "txtheight", "field": "hr"},
      "fill": {"scale": "colourScale22", "field": "_source.info"},
      "opacity": {"value": 0.8},
    }
  }
}

hr is defined as follows:

"transform":[
  {"type": "formula", "as": "hr", "expr": "toDate(datum._source['time'])"}]

When I use xtime scales as band type I got the following result

But I want the x axis time based so when I change xtime type into time I got the following

I want to preserve the heights order of the rectangles when I use time based axis. Any help would be appreciated

Issa,

The band scale is correct. You just need to adjust the presentation of the dates. In your axes for the x axis, you can add in:
"encode": {"labels": {"update": {"text": {"signal": "timeFormat(datum.hr, '%x')"}}}}}

Pending how you set your time, you can also run it as utcFormat. For a listing of date/time formats, please reference https://github.com/d3/d3-time-format#locale_format.

Please let me know if that works or not.

Hello I am sorry for the late reply. Unfortunately it didn't work :confused:

Issa,

Can you please be more specific as to what you tried? What specifically did not work?

Thanks!