Search code examples
powerbivisualizationpowerbi-desktopvega-litedeneb

Faceted Chart, separate into 2 colums, prevent label overlapping (horizontal/vertical)


I have a faceted chart, where labels are overlapping and all charts are in 1 row. I´d like to display the charts in 2 columns and prevent labels being overlapped. potentially overlapping horizontal labels should have a padding of 5px potentially overlapping vertical labels should have a padding of 2px

It should look like that (don´t mind color difference)

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "Percent": 0.001,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "AH"
      },
      {
        "Percent": 0.001,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "FLV"
      },
      {
        "Percent": 0.247,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KFZ"
      },
      {
        "Percent": 0.056,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KV"
      },
      {
        "Percent": 0.03,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "LV"
      },
      {
        "Percent": 0.044,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "RS"
      },
      {
        "Percent": 0.17,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "SV"
      },
      {
        "Percent": 0.064,
        "Team": "ALL",
        "type": "total",
        "ID": "1",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "UV"
      },
      {
        "Percent": 0.001,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "AH"
      },
      {
        "Percent": 0.001,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "FLV"
      },
      {
        "Percent": 0.067,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KFZ"
      },
      {
        "Percent": 0.042,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KV"
      },
      {
        "Percent": 0.015,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "LV"
      },
      {
        "Percent": 0.013,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "RS"
      },
      {
        "Percent": 0.077,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "SV"
      },
      {
        "Percent": 0.036,
        "Team": "ALL",
        "type": "part",
        "ID": "1",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "UV"
      },
      {
        "Percent": 0.001,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "AH"
      },
      {
        "Percent": 0.002,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "FLV"
      },
      {
        "Percent": 0.306,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KFZ"
      },
      {
        "Percent": 0.081,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KV"
      },
      {
        "Percent": 0.048,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "LV"
      },
      {
        "Percent": 0.057,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "RS"
      },
      {
        "Percent": 0.215,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "SV"
      },
      {
        "Percent": 0.093,
        "Team": "Team A",
        "type": "total",
        "ID": "2",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "UV"
      },
      {
        "Percent": 0.001,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "AH"
      },
      {
        "Percent": 0.001,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "FLV"
      },
      {
        "Percent": 0.055,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KFZ"
      },
      {
        "Percent": 0.028,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KV"
      },
      {
        "Percent": 0.01,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "LV"
      },
      {
        "Percent": 0.012,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "RS"
      },
      {
        "Percent": 0.056,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "SV"
      },
      {
        "Percent": 0.026,
        "Team": "Team A",
        "type": "part",
        "ID": "2",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "UV"
      },
      {
        "Percent": 0.001,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "AH"
      },
      {
        "Percent": 0.001,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "FLV"
      },
      {
        "Percent": 0.295,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KFZ"
      },
      {
        "Percent": 0.055,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KV"
      },
      {
        "Percent": 0.025,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "LV"
      },
      {
        "Percent": 0.051,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "RS"
      },
      {
        "Percent": 0.2,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "SV"
      },
      {
        "Percent": 0.063,
        "Team": "Team B",
        "type": "total",
        "ID": "3",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "UV"
      },
      {
        "Percent": 0,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "AH"
      },
      {
        "Percent": 0,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "FLV"
      },
      {
        "Percent": 0.083,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KFZ"
      },
      {
        "Percent": 0.042,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KV"
      },
      {
        "Percent": 0.009,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "LV"
      },
      {
        "Percent": 0.014,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "RS"
      },
      {
        "Percent": 0.082,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "SV"
      },
      {
        "Percent": 0.023,
        "Team": "Team B",
        "type": "part",
        "ID": "3",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "UV"
      },
      {
        "Percent": 0,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "AH"
      },
      {
        "Percent": 0,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "FLV"
      },
      {
        "Percent": 0.004,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KFZ"
      },
      {
        "Percent": 0.006,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "KV"
      },
      {
        "Percent": 0.002,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "LV"
      },
      {
        "Percent": 0.001,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "RS"
      },
      {
        "Percent": 0.003,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "SV"
      },
      {
        "Percent": 0.003,
        "Team": "Team C",
        "type": "total",
        "ID": "4",
        "SortOrder": "1",
        "color": "#005CA9",
        "Category": "UV"
      },
      {
        "Percent": 0.001,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "AH"
      },
      {
        "Percent": 0.001,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "FLV"
      },
      {
        "Percent": 0.054,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KFZ"
      },
      {
        "Percent": 0.068,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "KV"
      },
      {
        "Percent": 0.041,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "LV"
      },
      {
        "Percent": 0.012,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "RS"
      },
      {
        "Percent": 0.107,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "SV"
      },
      {
        "Percent": 0.086,
        "Team": "Team C",
        "type": "part",
        "ID": "4",
        "SortOrder": "2",
        "color": "#86C2EB",
        "Category": "UV"
      }
    ]
  },
  "transform": [
    {"calculate": "1 * 0", "as": "Zero"},
    {"calculate": "1 * 1", "as": "One"}
  ],
  "facet": {"field": "Category", "type": "ordinal"},
  "spec": {
    "encoding": {
      "y": {
        "field": "Team",
        "type": "ordinal",
        "axis": null,
        "sort": {"op": "sum", "field": "ID", "order": "ascending"}
      }
    },
    "layer": [
      {
        "name": "BackgroundBAR",
        "mark": {
          "type": "bar",
          "color": "#DEE2E6",
          "height": 5,
          "cornerRadiusEnd": 4,
          "yOffset": 10
        },
        "encoding": {
          "x": {
            "field": "One",
            "type": "quantitative",
            "axis": {
              "title": null,
              "offset": 10,
              "tickCount": 5,
              "format": "0.0%"
            },
            "stack": false
          }
        }
      },
      {
        "name": "BAR",
        "mark": {
          "type": "bar",
          "height": 5,
          "cornerRadiusEnd": 4,
          "yOffset": 10
        },
        "encoding": {
          "x": {
            "field": "Percent",
            "type": "quantitative",
            "axis": null,
            "stack": true,
            "sort": {"op": "sum", "field": "SortOrder", "order": "ascending"}
          },
          "color": {
            "field": "type",
            "type": "nominal",
            "legend": {"orient": "bottom", "title": null}
          }
        }
      },
      {
        "name": "text",
        "mark": {
          "type": "text",
          "align": "left",
          "color": "#005CA9",
          "font": "Segoe UI",
          "fontSize": 10,
          "fontStyle": "normal",
          "fontWeight": "bold"
        },
        "encoding": {
          "x": {"field": "Zero", "type": "quantitative"},
          "text": {"field": "Team", "type": "nominal"}
        }
      },
      {
        "name": "DATA_LABEL",
        "mark": {
          "type": "text",
          "color": "#005CA9",
          "align": "left",
          "fontSize": 8,
          "font": "Segoe UI",
          "fontStyle": "normal",
          "fontWeight": "bold",
          "xOffset": 5,
          "yOffset": 20
        },
        "encoding": {
          "x": {"field": "Percent", "type": "quantitative", "stack": true},
          "color": {
            "field": "type",
            "type": "nominal",
            "legend": {"orient": "bottom"}
          },
          "text": {"field": "Percent", "format": "0.0%"}
        }
      }
    ]
  }
}

did not work, adding a column parameter to facet: "facet": {"field": "Category", "type": "ordinal","columns":2} padding between labels: no Idea


Solution

  • This is quite fiddly in VL but the following works.

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {
            "Percent": 0.001,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "AH"
          },
          {
            "Percent": 0.001,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "FLV"
          },
          {
            "Percent": 0.247,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KFZ"
          },
          {
            "Percent": 0.056,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KV"
          },
          {
            "Percent": 0.03,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "LV"
          },
          {
            "Percent": 0.044,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "RS"
          },
          {
            "Percent": 0.17,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "SV"
          },
          {
            "Percent": 0.064,
            "Team": "ALL",
            "type": "total",
            "ID": "1",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "UV"
          },
          {
            "Percent": 0.001,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "AH"
          },
          {
            "Percent": 0.001,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "FLV"
          },
          {
            "Percent": 0.067,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KFZ"
          },
          {
            "Percent": 0.042,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KV"
          },
          {
            "Percent": 0.015,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "LV"
          },
          {
            "Percent": 0.013,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "RS"
          },
          {
            "Percent": 0.077,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "SV"
          },
          {
            "Percent": 0.036,
            "Team": "ALL",
            "type": "part",
            "ID": "1",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "UV"
          },
          {
            "Percent": 0.001,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "AH"
          },
          {
            "Percent": 0.002,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "FLV"
          },
          {
            "Percent": 0.306,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KFZ"
          },
          {
            "Percent": 0.081,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KV"
          },
          {
            "Percent": 0.048,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "LV"
          },
          {
            "Percent": 0.057,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "RS"
          },
          {
            "Percent": 0.215,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "SV"
          },
          {
            "Percent": 0.093,
            "Team": "Team A",
            "type": "total",
            "ID": "2",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "UV"
          },
          {
            "Percent": 0.001,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "AH"
          },
          {
            "Percent": 0.001,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "FLV"
          },
          {
            "Percent": 0.055,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KFZ"
          },
          {
            "Percent": 0.028,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KV"
          },
          {
            "Percent": 0.01,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "LV"
          },
          {
            "Percent": 0.012,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "RS"
          },
          {
            "Percent": 0.056,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "SV"
          },
          {
            "Percent": 0.026,
            "Team": "Team A",
            "type": "part",
            "ID": "2",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "UV"
          },
          {
            "Percent": 0.001,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "AH"
          },
          {
            "Percent": 0.001,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "FLV"
          },
          {
            "Percent": 0.295,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KFZ"
          },
          {
            "Percent": 0.055,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KV"
          },
          {
            "Percent": 0.025,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "LV"
          },
          {
            "Percent": 0.051,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "RS"
          },
          {
            "Percent": 0.2,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "SV"
          },
          {
            "Percent": 0.063,
            "Team": "Team B",
            "type": "total",
            "ID": "3",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "UV"
          },
          {
            "Percent": 0,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "AH"
          },
          {
            "Percent": 0,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "FLV"
          },
          {
            "Percent": 0.083,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KFZ"
          },
          {
            "Percent": 0.042,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KV"
          },
          {
            "Percent": 0.009,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "LV"
          },
          {
            "Percent": 0.014,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "RS"
          },
          {
            "Percent": 0.082,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "SV"
          },
          {
            "Percent": 0.023,
            "Team": "Team B",
            "type": "part",
            "ID": "3",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "UV"
          },
          {
            "Percent": 0,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "AH"
          },
          {
            "Percent": 0,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "FLV"
          },
          {
            "Percent": 0.004,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KFZ"
          },
          {
            "Percent": 0.006,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "KV"
          },
          {
            "Percent": 0.002,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "LV"
          },
          {
            "Percent": 0.001,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "RS"
          },
          {
            "Percent": 0.003,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "SV"
          },
          {
            "Percent": 0.003,
            "Team": "Team C",
            "type": "total",
            "ID": "4",
            "SortOrder": "1",
            "color": "#005CA9",
            "Category": "UV"
          },
          {
            "Percent": 0.001,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "AH"
          },
          {
            "Percent": 0.001,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "FLV"
          },
          {
            "Percent": 0.054,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KFZ"
          },
          {
            "Percent": 0.068,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "KV"
          },
          {
            "Percent": 0.041,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "LV"
          },
          {
            "Percent": 0.012,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "RS"
          },
          {
            "Percent": 0.107,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "SV"
          },
          {
            "Percent": 0.086,
            "Team": "Team C",
            "type": "part",
            "ID": "4",
            "SortOrder": "2",
            "color": "#86C2EB",
            "Category": "UV"
          }
        ]
      },
      "transform": [
        {"calculate": "1 * 0", "as": "Zero"},
        {"calculate": "1 * 1", "as": "One"},
        {
          "stack": "Percent",
          "as": ["v1", "v2"],
          "groupby": ["Category", "Team"],
          "sort": [{"field": "SortOrder", "order": "descending"}]
        },
        {"calculate": "datum.v2-datum.v1", "as": "var"},
        {"calculate": "datum.var<0.065?datum.v1+0.09:datum.v2", "as": "v2_pos"}
      ],
      "facet": {"field": "Category", "type": "ordinal"},
      "spec": {
        "height": 140,
        "view": {"strokeWidth": 0},
        "encoding": {"y": {"field": "Team", "type": "ordinal", "axis": null}},
        "layer": [
          {
            "name": "BackgroundBAR",
            "mark": {
              "type": "bar",
              "color": "#DEE2E6",
              "height": 5,
              "cornerRadiusEnd": 4,
              "yOffset": 10
            },
            "encoding": {
              "x": {
                "field": "One",
                "type": "quantitative",
                "axis": {
                  "title": null,
                  "offset": 10,
                  "tickCount": 5,
                  "format": "0.0%"
                },
                "stack": false
              }
            }
          },
          {
            "name": "BAR",
            "mark": {"type": "bar", "height": 5, "yOffset": 10},
            "encoding": {
              "x": {"field": "v1", "type": "quantitative", "axis": null},
              "x2": {"field": "v2"},
              "color": {
                "field": "type",
                "type": "nominal",
                "legend": {"orient": "bottom", "title": null}
              }
            }
          },
          {
            "name": "text",
            "mark": {
              "type": "text",
              "align": "left",
              "color": "#005CA9",
              "font": "Segoe UI",
              "fontSize": 10,
              "fontStyle": "normal",
              "fontWeight": "bold"
            },
            "encoding": {
              "x": {"field": "Zero", "type": "quantitative"},
              "text": {"field": "Team", "type": "nominal"}
            }
          },
          {
            "name": "DATA_LABEL",
            "transform": [{"filter": "datum.type =='part'"}],
            "mark": {
              "type": "text",
              "color": "#005CA9",
              "align": "left",
              "fontSize": 8,
              "font": "Segoe UI",
              "fontStyle": "normal",
              "fontWeight": "bold",
              "xOffset": 0,
              "yOffset": 20
            },
            "encoding": {
              "x": {"field": "v2", "type": "quantitative"},
              "color": {
                "field": "type",
                "type": "nominal",
                "legend": {"orient": "bottom"}
              },
              "text": {"field": "Percent", "format": "0.0%"}
            }
          },
          {
            "name": "DATA_LABEL2",
            "transform": [{"filter": "datum.type =='total'"}],
            "mark": {
              "type": "text",
              "color": "#005CA9",
              "align": "left",
              "fontSize": 8,
              "font": "Segoe UI",
              "fontStyle": "normal",
              "fontWeight": "bold",
              "xOffset": 0,
              "yOffset": 20
            },
            "encoding": {
              "x": {"field": "v2_pos", "type": "quantitative"},
              "color": {
                "field": "type",
                "type": "nominal",
                "legend": {"orient": "bottom"}
              },
              "text": {"field": "Percent", "format": "0.0%"}
            }
          }
        ]
      },
      "columns": 2
    }