Forum Discussion
how to implement Deneb chart with many column labels?
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
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
6 Replies
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-Forum/ba-p/963216
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/1447523screenshot 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% Hey Anonymous - 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.
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
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} } }
