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

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)

"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

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

"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

how can i fix this?

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

"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

but i don't know that how set X-Axis's offset property's value dynamically. like this
xaxis4
thats why im using Axis 'top' instead 'bottom'.

@nyuriks can you please grab this?

Thanks,
Bhavya

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