Vega-lite multi-view re-sizing issue in Kibana dashboard

Elastic Stack Kibana
1

HI to everyone.
I have a problem with resizing my vega-lite visualization which is part of my dashboard. The visualization is not resizing according to its container.
My visualization is a multi-view composed of three bar charts being concatenated horizontally using hconcat keyword:

{

  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  
  "data": {
    "values": [
      {"categ": "A", "In": 7752664.91, "Out": 7998880.02, "Diff": -246215.11},
      {"categ": "B", "In": 1896544.08, "Out": 1961014.26, "Diff": -64470.18},
      {"categ": "C", "In": 992074.65, "Out": 985438.38, "Diff": 6636.27},
      {"categ": "D", "In": 741681.84, "Out": 708572.92, "Diff": 33108.92},
      {"categ": "E", "In":776910.05, "Out": 694022.87, "Diff": 82887.18}
    ]
  },

  "transform": [
    { "calculate": "abs(datum.Diff)", "as": "Diff-Abs" }
  ],
  
  "config": {
    "view": {"stroke": "transparent" },
    "bar": { "fillOpacity": 0.8},
    "axis": { "labelFontSize":14},
    "title": { "fontSize": 18},
    "text": {
      "fontSize": 18,
      "fontWeight": 500,
      "align" : "center",
      "dy": 5
    }
  },
 
  "spacing": 40,

  "hconcat": 
  [
    {
      "title":"In",
      "encoding": { 
        "y": {
          "field": "categ", 
          "type":"nominal",
          "axis":{"title": "", "ticks": false, "labelPadding": 10}
        }
      },
      
      "layer": [
        {
          "mark": { "type": "bar", "fill": "lightblue" },
          "encoding": {
            "x": {
              "field": "In", 
              "type": "quantitative",
              "axis": null
            }          
          }
        },
        {
          "mark": {"type": "text", "align": "center", "dy": 2},
          "encoding": { "text": { "field": "In", "type": "nominal"}}
        }
      ]
    },    
    {
      "title":"Out", 

      "encoding": { 
        "y": {
          "field": "categ", 
          "type":"nominal",
          "axis":{"title": "", "ticks": false, "labelPadding": 10}
        }
      },
      
      "layer": [
        {
          "mark": { "type": "bar", "fill": "lightblue" },
          "encoding": {
            "x": {
              "field": "Out", 
              "type": "quantitative",
              "axis": null
            }          
          }
        },
        {
          "mark": {"type": "text", "align": "center", "dy": 2},
          "encoding": { "text": { "field": "Out", "type": "nominal"}}
        }
      ]
    },
    {
      "title":"Diff", 

      "encoding": { 
        "y": {
          "field": "categ", 
          "type":"nominal",
          "axis":{"title": "", "ticks": false, "labelPadding": 10}
        }
      },
      
      "layer": [
        {
          "mark": { "type": "bar", "fill": "lightgreen" },
          "encoding": {
            "x": {
              "field": "Diff-Abs", 
              "type": "quantitative",
              "axis": null
            },  
            "color": { "condition": {"test": "Diff < 0", "value": "red" }}
          }
        },
        {
          "mark": {"type": "text", "align": "center", "dy": 2},
          "encoding": { "text": { "field": "Diff", "type": "nominal"}}
        }
      ]
    }      
  ]   
}

If I, use just one bar chart (e.g. the first one ) as a single view visualization it resizer just fine ?! So it must be something with concatenating views!

EDIT:
I forgot to mention how I did find a similar thread here but that thread was closed automatically without a solution provided. Also, I would like to tag @nyuriks because of his reputation in vega and vega-light visualization here on the forum :wink:

2

Vega in Kibana automatically uses the autosize "fit" option to scale the visualization according to the container.

However this does not work for concatenated views as described here: Customizing Size | Vega-Lite

  • The view must be either a single view or a layered view. Fit does not work with other kinds of composed views ( facet / hconcat / vconcat / repeat ).

I'm not aware of a workaround besides using multiple vega charts, but maybe Yuri knows more :slight_smile:

3

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