how to implement Deneb chart with many column labels?

[Sergii_Petrov]

how to implement Deneb chart with many column labels?
Trying to replicate Tableau stacked bar chart with 2 columns on the left side.
pls point me on example or give any idea

I found some here : “hconcat” block to display six columns side-by-side

[dm-p]

Hey @Sergii_Petrov - based on the mockup and the data, I interpret your desired output as this. Is this correct? If not, please advise what needs fixing, and I will find more time to finish this up.

[Sergii_Petrov]

what could I reach so far, and stuck on setting 2nd level grouping

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"Sector": "Sector 0", "Channel": "Fragmented", "Sales": 100, "Net Sales": 40, "Profit": "40.0%"},
      {"Sector": "Sector 0", "Channel": "Organized", "Sales": 120, "Net Sales": 60, "Profit": "50.0%"},
      {"Sector": "Sector 1", "Channel": "Fragmented", "Sales": 1222, "Net Sales": 1162, "Profit": "95.1%"},
      {"Sector": "Sector 1", "Channel": "Organized", "Sales": 534, "Net Sales": 474, "Profit": "88.8%"},
      {"Sector": "Sector 2", "Channel": "Fragmented", "Sales": 265, "Net Sales": 205, "Profit": "77.4%"},
      {"Sector": "Sector 2", "Channel": "Organized", "Sales": 456, "Net Sales": 396, "Profit": "86.8%"},
      {"Sector": "Sector 4", "Channel": "Fragmented", "Sales": 666, "Net Sales": 606, "Profit": "91.0%"},
      {"Sector": "Sector 4", "Channel": "Organized", "Sales": 56, "Net Sales": 34, "Profit": "60.7%"},
      {"Sector": "Sector 5", "Channel": "Fragmented", "Sales": 6665, "Net Sales": 6605, "Profit": "99.1%"},
      {"Sector": "Sector 5", "Channel": "Organized", "Sales": 777, "Net Sales": 717, "Profit": "92.3%"},
      {"Sector": "Sector 6", "Channel": "Fragmented", "Sales": 888, "Net Sales": 828, "Profit": "93.2%"},
      {"Sector": "Sector 6", "Channel": "Organized", "Sales": 99, "Net Sales": 39, "Profit": "39.4%"}
    ]
  },
  "transform": [
    {"joinaggregate": [{"op": "sum", "field": "Sales", "as": "TotalSales"}]},
    {"calculate": "datum.Sales/datum.TotalSales * 100", "as": "PercentOfTotal"}
  ],
  "hconcat": [
    {
      "mark": "text",
      "encoding": {
        "y": {"field": "Sector", "type": "ordinal"},
        "text": {"field": "Sector", "type": "ordinal"}
      }
    },
  {
      "mark": "text",
      "encoding": {
        "y": {"field": "Sector", "type": "ordinal"},
        "x": {"field": "Channel", "type": "ordinal"},
        "text": {"field": "Sales", "type": "quantitative", "format": ",.0f"},
        "tooltip": [
          {"field": "Sales", "type": "quantitative", "title": "Sales"},
          {"field": "Net Sales", "type": "quantitative", "title": "Net Sales"},
          {"field": "Profit", "type": "nominal", "title": "Profit"}
        ]
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "Sector", "type": "ordinal"},
        "x": {"field": "Sales", "type": "quantitative", "axis": {"labels": true,"title": null,"labelFontSize": 12, "titleFontSize": 14}},
        "color": {"field": "Channel", "type": "nominal", "title": "Channel"}
      }
    }
  ],
  "resolve": {"scale": {"y": "shared"}}
,  "config": {
    "text": {"baseline": "middle", "fontSize": 8},
    "view": {"stroke": "transparent"},
    "axis": {"domain": false, "ticks": false, "labels": false, "title": null},
    "legend": {"orient": "right", "titleFontSize": 14, "labelFontSize": 12}
  }
  }

[Sergii_Petrov]

exactly!
if you have similar template it would be great.

only thing I'd  like 2 more numeric columns in a matrix on the right to "fragmented" one

[dm-p · Accepted solution]

Apologies for the delay. I have been sick for the last couple of weeks and am trying to catch up on things before the holidays. I've added columns to mimic the original mockup, so you should be able to adapt accordingly. Note that x-positioning is hard-coded, but this could be done via transforms - either way, I'm hoping this is enough for you to have a think about your version. A workbook containing the spec is also attached to this post.

Spec

{
  "data": {
    "name": "dataset"
  },
  "transform": [
    {
      "calculate": "datum['Sector'] + '-' + datum['Channel']",
      "as": "grain"
    },
    {
      "window": [
        {
          "op": "row_number",
          "as": "group_row_number"
        }
      ],
      "groupby": [
        "Sector"
      ]
    }
  ],
  "spacing": 0,
  "hconcat": [
    /* Labels */
    {
      "width": 150,
      "layer": [
        /* "Group" (sector) */
        {
          "transform": [
            {
              "filter": "datum['group_row_number'] == 1"
            }
          ],
          "mark": {
            "type": "text",
            "style": [
              "category_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Sector"
            },
            "x": {
              "value": 0
            }
          }
        },
        /* Channel column */
        {
          "mark": {
            "type": "text",
            "style": [
              "category_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Channel"
            },
            "x": {
              "value": 75
            }
          }
        },
        /* Sales Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Sales"
            },
            "x": {
              "value": 175
            }
          }
        },
        /* Net Sales Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Net Sales"
            },
            "x": {
              "value": 225
            }
          }
        },
        /* Profit Value */
        {
          "mark": {
            "type": "text",
            "style": [
              "value_label"
            ]
          },
          "encoding": {
            "text": {
              "field": "Profit",
              "format": ".1%"
            },
            "x": {
              "value": 275
            }
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "grain"
        }
      }
    },
    /* Negative-facing stack */
    {
      "width": 150,
      "transform": [
        {
          "fold": [
            "Sales",
            "Net Sales"
          ],
          "as": [
            "metric",
            "value"
          ]
        }
      ],
      "layer": [
        {
          "mark": {
            "type": "bar"
          }
        }
      ],
      "encoding": {
        "y": {
          "field": "grain"
        },
        "x": {
          "field": "value",
          "type": "quantitative",
          "scale": {
            "reverse": true
          }
        },
        "color": {
          "field": "metric",
          "legend": null,
          "scale": {
            "range": ["#cee9fb", "#99cef7"]
          }
        }
      }
    },
    /* Positive-facing stack */
    {
      "width": 150,
      "layer": [
        {
          "mark": {
            "type": "bar",
            "color": "#d5a0c7"
          }
        }
      ],
      "encoding": {
        "x": {
          "field": "Profit",
          "type": "quantitative"
        },
        "y": {
          "field": "grain"
        }
      }
    }
  ]
}

Config

{
  "view": {
    "stroke": "transparent"
  },
  "axis": {
    "title": false,
    "ticks": false,
    "grid": false,
    "domain": false,
    "labels": false
  },
  "style": {
    "category_label": {
      "align": "left"
    },
    "value_label": {
      "align": "right"
    }
  }
}

Cheers,

Daniel

[Sergii_Petrov]

screenshot of what I'm trying to achieve and test data

Sector	Channel	Sales	Net Sales	Profit
Sector 0	Fragmented	100	40	40.0%
	Organized	120	60	50.0%
Sector 1	Fragmented	1,222	1,162	95.1%
	Organized	534	474	88.8%
Sector 2	Fragmented	265	205	77.4%
	Organized	456	396	86.8%
Sector 4	Fragmented	666	606	91.0%
	Organized	56	34	60.7%
Sector 5	Fragmented	6,665	6,605	99.1%
	Organized	777	717	92.3%
Sector 6	Fragmented	888	828	93.2%
	Organized	99	39	39.4%

[lbendlin]

Please provide sample data that covers your issue or question completely, in a usable format (not as a screenshot).

Do not include sensitive information. Do not include anything that is unrelated to the issue or question.

Need help uploading data? https://community.fabric.microsoft.com/t5/Community-Blog/How-to-provide-sample-data-in-the-Power-BI-...

Please show the expected outcome based on the sample data you provided.

Want faster answers? https://community.fabric.microsoft.com/t5/Desktop/How-to-Get-Your-Question-Answered-Quickly/m-p/1447...