powerbivega-lite

Deneb Vega-Lite : concatenated view dynamic height/width change


is it possible to dynamically change the height/width of containers in Deneb when concatenating views (hconcat/vconcat)?

I tried few approaches, like for example below but I'm stuck here.

"height": {"expr": "datum['selected_granularity'] === 0 ? 200 : 180"}

sample code:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "vconcat": [
    {
      "data": {
        "values": [
          {"category": "A", "value": 10}
        ]
      },
      "height": 190,
      "width": 160,
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"}
      }
    },
    {
      "data": {
        "values": [
          {"category": "A", "value": 30}
        ]
      },
      "height": 190,
      "width": 160,
      "mark": "point",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"}
      }
    }
  ]
}

thanks for the help


Solution

  • I can get it working with a Single view but not Vconcat. In this example the largest dim data dictates the chart height dynamically. Maybe this will help you. Probably not ;)

    You may have to switch over to Vega for this.

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"category": "A", "value": 10, "dim": 100},
          {"category": "B", "value": 80, "dim": 100},
          {"category": "C", "value": 7000, "dim": 300}
        ]
      },
      "params": [
        {"name": "extents", "expr": "extent(pluck(data('source_0'), 'dim'))"},
        {"name": "height", "expr": "extents[1]"}
      ],
      "width": "container",
      "autosize": {
        "type": "fit",
        "contains": "padding"
      },
      "mark": {"type": "bar"},
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative", "aggregate": "sum"}
      }
    }