Power BI is turning 10, and we’re marking the occasion with a special community challenge. Use your creativity to tell a story, uncover trends, or highlight something unexpected.
Get startedJoin us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.
I have a bubble chart on Power BI that I made using the Deneb visual in Vega-lite. I am new to Vega-lite so I'm still learning. I want each bubble to have a label with the title for that row. However, I want to make it so the labels don't overlap if possible. Is there a way to make the labels not overlap? The labels also overlap the legend on the right. I was also thinking about filtering so that only larger bubbles have a label, but I'm not sure how to do that either.
Here is a screenshot showing how the labels overlap each other and the legend.
Here is my script with some dummy data to show the issue:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "dataset"
},
"width": 950,
"height": 400,
"encoding": {
"x": {
"field": "Date",
"type": "temporal",
"axis": {"grid": false, "format":"Q%q %Y"}
},
"y": {
"field": "Prob",
"type": "quantitative",
"axis": {"title": "prob"}
},
"tooltip" : [
{"field":"Title", "type": "nominal"},
{"field":"Group", "type": "nominal"},
{"field":"Section", "type": "nominal"},
{"field":"Amount", "type": "nominal"},
{"field":"ID#", "type":"nominal"},
{"field":"Description", "type":"nominal"}
]
},
"layer":[{
"mark":{
"type": "circle",
"opacity": 0.8,
"stroke": "black",
"strokeWidth": 1
},
"encoding": {
"size": {
"field": "Amount",
"type": "quantitative",
"title": "",
"legend": "",
"scale": {"rangeMax": 1000}
},
"color": {
"field": "Group",
"type": "nominal"
}
}
},
{
"mark":{
"type": "circle",
"opacity": 0.8,
"stroke": "black",
"strokeWidth": 1
},
"encoding": {
"size": {
"field": "Amount",
"type": "quantitative",
"title": "",
"legend": "",
"scale": {"rangeMax": 1000}
},
"color": {
"field": "Group",
"type": "nominal"
}
}
},
{
"mark":{
"type": "text",
"align": "left",
"baseline": "top",
"dx":8,
"limit":150,
"angle":-25
},
"encoding": {
"text":{"field":"Title", "type":"nominal"}
},
"transform": [
{
"type": "label",
"anchor": ["top", "bottom", "right", "left"],
"offset": [1],
"size": {"signal": "[width + 60, height]"}
}
]
}
]
}
Hi @asodie,
It's not currently possible in Vega-Lite, but Vega has a label transform that can be used to avoid overlapping text marks. Porting this to Vega-Lite is on the roadmap, but the developers have no ETA at this time. If this is something you need, then you'll need to convert your specification to use Vega rather than Vega-Lite.
Regards,
Daniel
Proud to be a Super User!
On how to ask a technical question, if you really want an answer (courtesy of SQLBI)
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Check out the June 2025 Power BI update to learn about new features.