# Vega in kibana x-axis orient 'bottom' doesn't working properly

**URL:** https://discuss.elastic.co/t/vega-in-kibana-x-axis-orient-bottom-doesnt-working-properly/164977
**Category:** Kibana
**Tags:** vega
**Created:** [January 21, 2019, 5:11am UTC](https://discuss.elastic.co/t/vega-in-kibana-x-axis-orient-bottom-doesnt-working-properly/164977 "2019-01-21T05:11:31Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![teemoGod](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/teemogod/32/40817_2.png) [@teemoGod](https://discuss.elastic.co/u/teemoGod)
#### Post date: [January 21, 2019, 5:11am UTC](https://discuss.elastic.co/t/vega-in-kibana-x-axis-orient-bottom-doesnt-working-properly/164977/1 "2019-01-21T05:11:31Z")

</div>

hi. im using vega3, and my kibana version is 6.4.1

following is my axes config.

my axes config is placed in 'marks' config (inner axes)

```json
"marks" : [
      "signals": [
        {"name": "width", "value": 300},
        { "name": "requestHeightInterval", "update": "20" },
      ],
      
      "scales" : [
        {
          "name": "YScale",
          "type": "point",
          "range": {
            "step": {
              "signal": "requestHeightInterval"
            }
          },
          "domain": {
            "data": "Data1",
            "field": "controller.key",
            "sort": {
              "order": "ascending"
            }
          }
        },
        {
          "name": "XScale",
          "type": "linear",
          "range": "width",
          "nice": true,
          "zero": true,
          "domain": {
            "data": "Data1",
            "field": "profileDelay"
          }
        },
      ],
      "axes": [
        {
          "orient": "bottom", // here
          "scale": "XScale",
          "title": "AVG_Controller_Perf (ms)"
          "grid": true,
          "gridScale": "YScale",
        }
        {
          "orient": "left",
          "scale": "YScale",
          "title": "Controller"
          "grid": true,
          "gridScale": "XScale",
        },
         
      ]
]

```

but graph's x-axis is not working properly like this.  
 ![xaxis](https://us1.discourse-cdn.com/elastic/original/3X/8/7/87b5543c6fbab91812044100646cbe4dbcafafdd.jpeg)

so, i configed orient value of x-axis of axes to 'top' like this.

```json
"marks" : [
      "signals": [
        {"name": "width", "value": 300},
        { "name": "requestHeightInterval", "update": "20" },
      ],
      
      "scales" : [
        {
          "name": "YScale",
          "type": "point",
          "range": {
            "step": {
              "signal": "requestHeightInterval"
            }
          },
          "domain": {
            "data": "Data1",
            "field": "controller.key",
            "sort": {
              "order": "ascending"
            }
          }
        },
        {
          "name": "XScale",
          "type": "linear",
          "range": "width",
          "nice": true,
          "zero": true,
          "domain": {
            "data": "Data1",
            "field": "profileDelay"
          }
        },
      ],
      "axes": [
        {
          "orient": "top", // here
          "scale": "XScale",
          "title": "AVG_Controller_Perf (ms)"
          "grid": true,
          "gridScale": "YScale",
        }
        {
          "orient": "left",
          "scale": "YScale",
          "title": "Controller"
          "grid": true,
          "gridScale": "XScale",
        },
         
      ]
]

```

and following is the result .  
 ![xaxis2](https://us1.discourse-cdn.com/elastic/original/3X/2/7/27794fe85bed0c03e884f8dfbf807971156c522f.jpeg)

how can i fix this?

i tried following config, but this is not good and naive.

```auto
"axes": [
        {
          "orient": "top",
          "scale": "XScale",
          "grid": true,
          "gridScale": "YScale",
          "labels" :false,
          "ticks" : false
        },
        {
          "orient": "bottom",
          "scale": "XScale",
          "title": "AVG_Controller_Perf (ms)"
          "gridScale": "YScale",
          "offset" : 100
          
        }
        {
          "orient": "left",
          "scale": "YScale",
          "title": "Controller"
          "grid": true,
          "gridScale": "XScale",
        },
         
      ]

```

following is the result. (look good but not pretty configuration.)  
this is what a wanted graph.  
 ![xaxis3](https://us1.discourse-cdn.com/elastic/original/3X/d/8/d86d3d66317e1081e97f8efbd66504dc07547c44.jpeg)

but i don't know that how set X-Axis's offset property's value dynamically. like this  
 ![xaxis4](https://us1.discourse-cdn.com/elastic/original/3X/1/c/1c52d7bd24c1884d189b98fc0743f31fc967dd00.jpeg)  
thats why im using Axis 'top' instead 'bottom'.

---

<div class="post-metadata">

### Author: ![bhavyarm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/bhavyarm/32/22392_2.png) [@bhavyarm](https://discuss.elastic.co/u/bhavyarm)
#### Post date: [January 21, 2019, 4:30pm UTC](https://discuss.elastic.co/t/vega-in-kibana-x-axis-orient-bottom-doesnt-working-properly/164977/2 "2019-01-21T16:30:00Z")

</div>

@nyuriks can you please grab this?

Thanks,  
Bhavya

---

<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: [February 18, 2019, 4:30pm UTC](https://discuss.elastic.co/t/vega-in-kibana-x-axis-orient-bottom-doesnt-working-properly/164977/3 "2019-02-18T16:30:09Z")

</div>

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