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 : ...
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
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.
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}
}
}