Forum Discussion
Anonymous
1 year agoNot applicable
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 : ...
- 1 year ago
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
Anonymous
1 year agoNot applicable
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% |