Insert Circle With A Dotted Outline In Power BI Desktop

Power BI Desktop doesn't currently support applying dashed or dotted outlines directly to circle shapes. However, you can achieve this effect using the following workaround:

✅ Workaround: Import a Dotted Circle as an Image

1. Create the Dotted Circle:
   • Use a graphic design tool like PowerPoint, Figma, or Canva.
   • Draw a circle and apply a dashed or dotted outline.
   • Set the fill to "No Fill" to ensure transparency.
   • Export the design as a PNG with a transparent background.
2. Insert into Power BI:
   • In Power BI Desktop, go to the Insert tab and select Image.
   • Upload the PNG file you created.
   • Position and resize the image as needed on your report canvas.
3. Alternative Method Using a Blank Button:
   • Insert a Blank Button from the Insert tab.
   • In the Format pane, navigate to the Style section.
   • Set the Fill to Image and upload your dotted circle PNG.
   • Adjust the button's size and position accordingly.

This approach allows you to incorporate a dotted circle into your Power BI report, providing the desired visual effect.

🧠 Additional Tips

• Layering: Place the dotted circle image behind or around other visuals to highlight specific data points or sections.
• Consistency: Use the same design tool and settings for creating multiple dotted shapes to maintain a consistent look throughout your report.

Hi bazman1uk ,

Thank you for reaching out to the Microsoft Community Forum.

In addition to SolomonovAnton response, I am adding some more workarounds.

1. Use SVG in HTML Viewer

Use the HTML Viewer custom visual from AppSource. Embed an SVG snippet like:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-dasharray="5,5" stroke-width="2" fill="none" />
</svg>

Note: This will render a circle with a dashed outline.

2. Use Deneb or Charticulator

These advanced custom visuals allow you to design visuals using Vega-Lite Deneb or drag and drop Charticulator.
You can Create a circular mark. Apply a dashed stroke using strokeDash in Deneb.

Please follow below steps:

1. Install the Deneb custom visual from AppSource.
2. Add the visual to your report and choose Vega-Lite as the language.
3. Paste the contents of below snippet code into the Deneb editor.
4. Adjust the stroke, strokeDash, and size values as needed for your design.

{"$schema": "https://vega.github.io/schema/vega-lite/v5.json", "width": 100, "height": 100, "mark": {"type": "circle", "stroke": "black", "strokeDash": [5, 5], "strokeWidth": 2, "fill": "none"}, "encoding": {"x": {"value": 50}, "y": {"value": 50}, "size": {"value": 1600}}}

If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

Thank you