0

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. image of bubble chart

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"}
    }
  },
  
  
  "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"
           },
           
    "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"}
                ]
        }
    },
    
    
    {
      "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]"}
        }
      ]
    }
  ]
  
}```



I have tried using the label transform and wasn't able to get it to work. 
Alyssa
  • 21
  • 1

0 Answers0