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:
Workshop Vega Spec
{
"$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.