Kibana Vega-Lite plots do not resize as expected

[M_Chiorboli (Massimiliano Chiorboli)]

Hello,
I had to rewrite some visualisations in Kibana with Veg-Lite because they are based on nested fields.
I set the automated resize in the script:

  "autosize": {
    "type": "fit",
    "contains": "padding",
    resize: true
  },

but it works only partially.

If I resize vertically, the pie chart is resized correctly. But if I resize horizontally, the pie charts does not resize, it gets only partially visualized if the window gets smaller than the chart, and scroll bars appear.

Also: the pie chart, at the moment of the creation, is horizontally centered. If I increase the horizontal width, it gets recentered, going then further from the left border, but if I decrease that width, it doesn't recenter, and it stays far from the left border.

Also: when I resize, the legend moves to the right, and it's not moved back to the left if I reduce the horizontal width.

The final effect is that every time I resize, everything is messed up.

What is wrong in what I do?

Here is the code I use:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  //"width": "container",
  //"height": container,
  data: {
    url: {
      %context%: true
      %timefield%: timestamp
      index: search-sonarqube-telemetry-*
      body: {
        "aggs": {
          "languages": {
            "terms": { "field": "nclocByLanguage.language.keyword"}  
          }
        }
        size: 0
      }
    }
    format: {property: "aggregations.languages.buckets" }
  }
  
  config:{
    padding:{
      left:{
        "expr": "width/100"
      }
    }
  }

 
  "autosize": {
    "type": "fit",
    "contains": "padding",
    resize: true
  },
 
 
  encoding: {
    color: {
      field: "key"
      type: nominal
      sort: theta
      "legend": {
        title: false
        "labelFontSize": {
          //"expr": "min(width,height)/35"
          "expr": "(width+height)/90"
        }
        padding: 20
        offset:-200
        rowPadding: {
          "expr": "(width+height)/90"
        }
        /*
        offset: {
          "expr": "-height/2"
        }
        padding: {
          "expr": "(width+height)/15"
        }
        rowPadding: {
          "expr": "(width+height)/90"
        }
        clipHeight:{
          "expr": "(width+height)/90"
        }
        */
      },
    }
    theta: {
      field: "PercentOfTotal"
      type: quantitative
      stack: true
    }
    
    "order": {
      "field": "PercentOfTotal", "type": "quantitative", "sort":"descending"
    }
  }
  
  
  "transform": [{
    "window": [{
      "op": "sum",
      "field": "doc_count",
      "as": "total_doc_count"
    }],
    "frame": [null, null]
  },
  {
    "calculate": "datum.doc_count/datum.total_doc_count",
    "as": "PercentOfTotal"
  }],
  
  
  
  
 
 
  "layer": [
    {
      "mark": {
        type: "arc",
        "stroke": "#fff",
        "tooltip": true,
        "padAngle": 0.01,
        "radius": {
          "expr": "min(width,height)/2.1"
        },
        "params": [
          {
            "name": "highlight",
            "select": {
              "type": "point",
              "on": "mouseover"
            }
          },
          {
            "name": "select",
            "select": "point"
          }
          ]
      },
    },
    
    
    {
      "mark": {
        "type": "text", 
        "fontSize": {
          "expr": "min(width,height)/25"
        }
        "radius": {
          "expr": "min(width,height)/3.3"
        }
        "limit": {
          "expr": "min(width,height)/5"
        }
      },
      "encoding": {
        "text": {"field": "key","type": "nominal"}
        color: {
          value: white
        }
      }
    }  
    
    
    {
      "mark": {
        "type": "text", 
        "fontSize": {
          "expr": "min(width,height)/25"
        }
        "radius": {
          "expr": "min(width,height)/2.5"
        }
        "limit": {
          "expr": "min(width,height)/5"
        }
      },
      "encoding": {
        "text": {"field": "PercentOfTotal","type": "nominal", "format": ".1%"}
        color: {
          value: white
        }
      }
    } 
    
  ]
}  
  

[drewdaemon (Drew Tate)]

Hi @M_Chiorboli - are you able to post the Elasticsearch response that is backing your visualization? That would allow me to replicate your chart on my side.

You can get it by clicking "Inspect" from the custom visualization editor.

[M_Chiorboli (Massimiliano Chiorboli)]

{
  "took": 150,
  "timed_out": false,
  "_shards": {
    "total": 14,
    "successful": 14,
    "skipped": 13,
    "failed": 0
  },
  "hits": {
    "total": 74,
    "max_score": null,
    "hits": []
  },
  "aggregations": {
    "languages": {
      "doc_count_error_upper_bound": 0,
      "sum_other_doc_count": 20,
      "buckets": [
        {
          "key": "java",
          "doc_count": 43
        },
        {
          "key": "xml",
          "doc_count": 39
        },
        {
          "key": "js",
          "doc_count": 23
        },
        {
          "key": "css",
          "doc_count": 22
        },
        {
          "key": "web",
          "doc_count": 19
        },
        {
          "key": "ts",
          "doc_count": 15
        },
        {
          "key": "py",
          "doc_count": 14
        },
        {
          "key": "jsp",
          "doc_count": 8
        },
        {
          "key": "php",
          "doc_count": 6
        },
        {
          "key": "cs",
          "doc_count": 3
        }
      ]
    }
  }
}

[M_Chiorboli (Massimiliano Chiorboli)]

Hello @drewdaemon, here is the response.
Thanks,
Massimiliano

[drewdaemon (Drew Tate)]

@M_Chiorboli resizing your visualization seems to work for me.

The disparity could be because you're on a different version of Kibana or maybe because I inlined the response while yours is actually requesting data from your cluster.

I'm on version 8.1. To check whether inlining the data changes anything, you can create a new custom visualization with the following configuration and compare with your existing one.

Obviously, inlining your data isn't a real option, but identifying a difference could help us narrow this down.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": {
      "took": 150,
      "timed_out": false,
      "_shards": {
        "total": 14,
        "successful": 14,
        "skipped": 13,
        "failed": 0
      },
      "hits": {
        "total": 74,
        "max_score": null,
        "hits": []
      },
      "aggregations": {
        "languages": {
          "doc_count_error_upper_bound": 0,
          "sum_other_doc_count": 20,
          "buckets": [
            {
              "key": "java",
              "doc_count": 43
            },
            {
              "key": "xml",
              "doc_count": 39
            },
            {
              "key": "js",
              "doc_count": 23
            },
            {
              "key": "css",
              "doc_count": 22
            },
            {
              "key": "web",
              "doc_count": 19
            },
            {
              "key": "ts",
              "doc_count": 15
            },
            {
              "key": "py",
              "doc_count": 14
            },
            {
              "key": "jsp",
              "doc_count": 8
            },
            {
              "key": "php",
              "doc_count": 6
            },
            {
              "key": "cs",
              "doc_count": 3
            }
          ]
        }
      }
    },
    "format": { "property": "aggregations.languages.buckets" }
  },

  "config": {
    "padding": {
      "left": {
        "expr": "width/100"
      }
    }
  },

  "autosize": {
    "type": "fit",
    "contains": "padding",
    "resize": true
  },

  "encoding": {
    "color": {
      "field": "key",
      "type": "nominal",
      "sort": "theta",
      "legend": {
        "title": false,
        "labelFontSize": {
          "expr": "(width+height)/90"
        },
        "padding": 20,
        "offset": -200,
        "rowPadding": {
          "expr": "(width+height)/90"
        }
      }
    },
    "theta": {
      "field": "PercentOfTotal",
      "type": "quantitative",
      "stack": true
    },

    "order": {
      "field": "PercentOfTotal",
      "type": "quantitative",
      "sort": "descending"
    }
  },

  "transform": [
    {
      "window": [
        {
          "op": "sum",
          "field": "doc_count",
          "as": "total_doc_count"
        }
      ],
      "frame": [null, null]
    },
    {
      "calculate": "datum.doc_count/datum.total_doc_count",
      "as": "PercentOfTotal"
    }
  ],

  "layer": [
    {
      "mark": {
        "type": "arc",
        "stroke": "#fff",
        "tooltip": true,
        "padAngle": 0.01,
        "radius": {
          "expr": "min(width,height)/2.1"
        },
        "params": [
          {
            "name": "highlight",
            "select": {
              "type": "point",
              "on": "mouseover"
            }
          },
          {
            "name": "select",
            "select": "point"
          }
        ]
      }
    },

    {
      "mark": {
        "type": "text",
        "fontSize": {
          "expr": "min(width,height)/25"
        },
        "radius": {
          "expr": "min(width,height)/3.3"
        },
        "limit": {
          "expr": "min(width,height)/5"
        }
      },
      "encoding": {
        "text": { "field": "key", "type": "nominal" },
        "color": {
          "value": "white"
        }
      }
    },

    {
      "mark": {
        "type": "text",
        "fontSize": {
          "expr": "min(width,height)/25"
        },
        "radius": {
          "expr": "min(width,height)/2.5"
        },
        "limit": {
          "expr": "min(width,height)/5"
        }
      },
      "encoding": {
        "text": {
          "field": "PercentOfTotal",
          "type": "nominal",
          "format": ".1%"
        },
        "color": {
          "value": "white"
        }
      }
    }
  ]
}