How to scale the indivisual bar height in Vega Lite

Question

I want to scale the bar height according to the SUM_A + SUM_B value.

In this example I would like to have the first graph to have the same height as the last one.

And I would like the first bar to have the height of the sum of the height of the bars in the last graph.

{
  "data": {
    "values": [
      {
        "EBENE_1": "A",
        "EBENE_2": "AA",
        "EBENE_3": "AAA",
        "EBENE_4": "AAAA",
        "STORNO": -70,
        "EINGANG": 41
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AA",
        "EBENE_3": "AAB",
        "EBENE_4": "AABB",
        "STORNO": -22,
        "EINGANG": 81
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AB",
        "EBENE_3": "ABC",
        "EBENE_4": "ABCC",
        "STORNO": -31,
        "EINGANG": 89
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AB",
        "EBENE_3": "ABDD",
        "EBENE_4": "ABDD",
        "STORNO": -28,
        "EINGANG": 8
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AC",
        "EBENE_3": "ACE",
        "EBENE_4": "ACEE",
        "STORNO": -39,
        "EINGANG": 55
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AC",
        "EBENE_3": "ACE",
        "EBENE_4": "ACEF",
        "STORNO": -78,
        "EINGANG": 78
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AC",
        "EBENE_3": "ACF",
        "EBENE_4": "ACFG",
        "STORNO": -99,
        "EINGANG": 88
      },
      {
        "EBENE_1": "A",
        "EBENE_2": "AC",
        "EBENE_3": "ACF",
        "EBENE_4": "ACFH",
        "STORNO": -85,
        "EINGANG": 67
      }
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "sum", "field": "STORNO", "as": "SumA"}]},
    {"joinaggregate": [{"op": "sum", "field": "EINGANG", "as": "SumB"}]}
  ],
  "params": [
    {"name": "lowerLimit", "expr": "data('data_0')[0]['SumA']-200"},
    {"name": "upperLimit", "expr": "data('data_0')[0]['SumB']+100"}
  ],
  "repeat": {
    "layer": ["STORNO", "EINGANG"],
    "column": ["EBENE_1", "EBENE_2", "EBENE_3", "EBENE_4"]
  },
  "spec": {
    "height": 400,
    "width": 300,
    "mark": {"type": "bar"},
    "encoding": {
      "x": {
        "field": {"repeat": "layer"},
        "aggregate": "sum", 
            "scale": {
              "domain": [{"expr": "lowerLimit"},{"expr": "upperLimit"}], "zero": "true"
            }
      },
      "y": {"field": {"repeat": "column"}, "size": {"field": "sum"}
      }
    }
  }
}

i tried to use scale, but this scaled everything and not just the height.

score 0 · Answer 1 · answered Mar 14 '23 at 20:58

0

If I follow what you are asking, add a height in the spec:

  "spec": {
    "height": 200,

Open the Chart in the Vega Editor

answered Mar 14 '23 at 20:58

TheRizza

1,577
1
10
23

I renamed the categorys to make it clearer. I want the category ACF to have the same height as ACFG+ACFH to allow the report viewer to see which category in the tree belongs to each other. Sometimes writing in a second language can be a little bit hard. – Fabian Storck Mar 15 '23 at 06:59
I understand, but don't have any simple answers for this. Maybe try a "rect" mark instead of a bar and calculate the 'y" and "y2" channels? I couldn't find any way for "size" to work with bars like you want. Or maybe a count aggregate on the y axis, and the EBENE_x values on "color" or "detail"? That makes me think that maybe the data isn't formatted properly for what you are trying to show, and maybe you need to redo the data table? Hoping someone else will jump in! – TheRizza Mar 15 '23 at 21:54
I switched to Vega and yould solve everything I wanted. – Fabian Storck Mar 16 '23 at 14:30
@FabianStorck I would love to see your final code. Can you share in a new answer and mark it as the solution? – TheRizza Mar 17 '23 at 17:28
Will Post it later. – Fabian Storck Mar 18 '23 at 19:16

score 0 · Accepted Answer · edited Mar 27 '23 at 14:10

I solved the Problem for me in Vega:

Define a variable for the height of the visual, as I used it in the Deneb Plugin in PBI I used the pbiContainerHeight as reference:

    "signals": [
        {
          "name": "visualHeight",
          "update": "pbiContainerHeight"
        }]

I created a rolling count for Ebene_4 (layer 4) as this is the smallest elemente and created a dataset for every EBENE (layer) containing the amount of EBENE_4 elements.

    {
      "name": "EBENE_X_GRAPH",
      "source": "data_0",
      "transform": [
                {
          "type": "window",
          "ops": ["sum"],
          "fields": ["count_EBENE_4"],
          "as": [
            "cumulative_count_ebene_4"
          ]
        }
      ]
    }

Then I calculated the Y and height of every element:

              "y": {
                "signal": "count_EBENE_4_height*(datum.cumulative_count_ebene_4-datum.count_EBENE_4)"
              },
              "height": {
                "signal": "(count_EBENE_4_height*datum.count_EBENE_4)-5"
              }

As lables didn´t work anymore I had to recreate them as text marks and use an offset of half the height to place them.

How to scale the indivisual bar height in Vega Lite

2 Answers2