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

**URL:** <https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [July 7, 2020, 7:47am UTC](https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115 "2020-07-07T07:47:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![issaissa](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@issaissa](https://discuss.elastic.co/u/issaissa)\
**Post date:** [July 7, 2020, 7:47am UTC](https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115/1 "2020-07-07T07:47:14Z")

</div>

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

 ![vega1](https://us1.discourse-cdn.com/elastic/original/3X/8/1/81b587236bb764fd9993c1b0e053c5695f3a9f4a.png)

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

 ![vega2](https://us1.discourse-cdn.com/elastic/original/3X/1/c/1c9ecf46a45bc6f318891531a968232899b0d49c.png)

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

---

<div class="post-metadata">

**Author:** ![Midas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/midas/32/50275_2.png) [@Midas](https://discuss.elastic.co/u/Midas)\
**Post date:** [July 20, 2020, 12:32am UTC](https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115/2 "2020-07-20T00:32:30Z")

</div>

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](https://github.com/d3/d3-time-format#locale_format).

Please let me know if that works or not.

---

<div class="post-metadata">

**Author:** ![issaissa](https://avatars.discourse-cdn.com/v4/letter/i/3be4f8/32.png) [@issaissa](https://discuss.elastic.co/u/issaissa)\
**Post date:** [July 29, 2020, 9:45am UTC](https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115/3 "2020-07-29T09:45:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Midas](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/midas/32/50275_2.png) [@Midas](https://discuss.elastic.co/u/Midas)\
**Post date:** [July 30, 2020, 8:08pm UTC](https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115/4 "2020-07-30T20:08:30Z")

</div>

Issa,

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

Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 27, 2020, 8:08pm UTC](https://discuss.elastic.co/t/preserve-heights-order-of-the-rectangles-when-i-use-time-based-axis/240115/5 "2020-08-27T20:08:34Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.