Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Be one of the first to start using Fabric Databases. View on-demand sessions with database experts and the Microsoft product team to learn just how easy it is to get started. Watch now

Reply
asodie
Helper I
Helper I

Vega-lite Deneb: How to make labels more readable on bubble chart

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. 

 

asodie_1-1690307675724.png

 

 

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]"}
        }
      ]
    }
  ]
  
}

 

1 REPLY 1
dm-p
Super User
Super User

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





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Dec Fabric Community Survey

We want your feedback!

Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions.

ArunFabCon

Microsoft Fabric Community Conference 2025

Arun Ulag shares exciting details about the Microsoft Fabric Conference 2025, which will be held in Las Vegas, NV.

December 2024

A Year in Review - December 2024

Find out what content was popular in the Fabric community during 2024.

Top Kudoed Authors