We are attempting to build a Bar Chart with Bars ‘Side by Side’ instead of stacked. We have Created 2 separate PLot Layers, but whenever they share Y Axis values, they automatically Stack. (2nd Screen Shot)
We attempted to manually control the X Axis, and this does show them seperate (but now overlapping instead of side by side). (3rd Screen Shot)
We need the Grey and Red Bars SIDE BY SIDE for each Y Axis ‘DC Name’.
Thank You in Advance,
Forrest
Hi @fhill,
If the Y axis is the same (your metric), use only one layer and split the colors using the segment option:
If you choose grouped you should see one bar per segment:
Just to be clear, your data should have a column that splits the rows between the two groups:
This is a known issue with the XY chart that we are tracking internally. One option is use a single layer that segments the series, and then you can choose your Segment Display.
There is also a bug where this segment display actually applies across all layers, so you could potentially add a Segment By property, set your segment display, then remove that property and have the segment display applied across layers.
If that doesn’t work the recommended solution would be to create this chart using the Vega Chart widget. Here is an example I have built out that I think has the side-by-side bars you are looking for:
Here is the spec I used for this chart (excluding the input data). I was able to write this spec mostly using AIP Assist prompts for the structure, with a couple manual edits to get the labels I wanted:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "vega_data"
},
"title": {
"text": "2020 to 2024 Market Cap Comparison",
"dy": -20,
"fontSize": 18
},
"facet": {
"row": {
"field": "name",
"type": "nominal",
"title": null,
"sort": {
"field": "marketCap",
"order": "descending"
}
}
},
"transform": [
{
"calculate": "datum.marketCap / 1e12",
"as": "marketCapInTrillions"
},
{
"calculate": "datum.marketCap2020EOY / 1e12",
"as": "marketCap2020InTrillions"
}
],
"spec": {
"width": 400,
"layer": [
{
"mark": {
"type": "bar",
"yOffset": -10,
"tooltip": true
},
"encoding": {
"x": {
"field": "marketCap",
"type": "quantitative",
"title": "",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"y": {
"type": "nominal",
"title": "",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"color": {
"value": "#215DB0"
},
"tooltip": [
{
"field": "marketCapInTrillions",
"type": "quantitative",
"title": "Market Cap (Trillions)"
}
]
}
},
{
"mark": {
"type": "bar",
"yOffset": 10,
"tooltip": true
},
"encoding": {
"x": {
"field": "marketCap2020EOY",
"type": "quantitative",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"y": {
"type": "nominal",
"title": "",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"color": {
"value": "#FBB360"
},
"tooltip": [
{
"field": "marketCap2020InTrillions",
"type": "quantitative",
"title": "2020 Market Cap (Trillions)"
}
]
}
},
{
"transform": [
{
"calculate": "-300000000000",
"as": "xAxis"
}
],
"mark": {
"type": "image",
"width": 25,
"height": 25,
"tooltip": null
},
"encoding": {
"x": {
"field": "xAxis",
"type": "quantitative",
"title": "",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"y": {
"type": "nominal",
"title": "",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"url": {
"field": "logoUrl",
"type": "nominal"
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"dx": 40,
"fontSize": 16
},
"encoding": {
"x": {
"field": "marketCap",
"type": "quantitative",
"aggregate": "max",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"y": {
"type": "nominal",
"title": "",
"axis": {
"labels": false,
"ticks": false,
"grid": false,
"domain": false
}
},
"text": {
"field": "percentageChange",
"type": "quantitative",
"format": ".1%"
},
"color": {
"condition": {
"test": "datum.percentageChange < 0",
"value": "#CD4246"
},
"value": "#238551"
}
},
"transform": [
{
"calculate": "datum.marketCap / datum.marketCap2020EOY - 1",
"as": "percentageChange"
}
]
}
]
}
}
You can use this chart as inspiration, and refer to the docs for more assistance in building your own.