The ultimate Fabric, Power BI, SQL, and AI community-led learning event. Save €200 with code FABCOMM.
Get registeredCompete to become Power BI Data Viz World Champion! First round ends August 18th. Get started.
I have this Bar Chart and I want to render these image URLs ,i.e, replace these URLs with actual Images. Kindly Help!!
Bar Chart:
Hi @Sandip_Palit ,
Thank you for reaching out to the Microsoft Community Forum.
Hi @danextian , @Nasif_Azam Thank you for your prompt responses.
Hi @Sandip_Palit , Could you please try the proposed solutions shared by @danextian and @Nasif_Azam .
Please do let us know if you have any further queries.
Regards,
Dinesh
Hi @Sandip_Palit ,
We haven’t heard from you on the last response and was just checking back to see if you have a resolution yet. And, if you have any further query do let us know.
Regards,
Dinesh
Hi @Sandip_Palit ,
We haven’t heard from you on the last response and was just checking back to see if you have a resolution yet. And, if you have any further query do let us know.
Regards,
Dinesh
Hey @Sandip_Palit ,
Native bar charts can not display images, only text. Build the image URL with DAX and show it in a visual that supports images (or via a tooltip). If that still doesn’t meet your need, use a custom visual (or Deneb) that can render images alongside bars.
Solution 1: Use Image URL
1. Create the URL:
-- If you have country codes (recommended)
Flag URL = "https://flagcdn.com/h40/" & LOWER([CountryCode]) & ".png"
-- If you only have country names, map to codes (sample)
Flag URL =
SWITCH(
[CountryName],
"Malta","https://flagcdn.com/h40/mt.png",
"Estonia","https://flagcdn.com/h40/ee.png",
"Ireland","https://flagcdn.com/h40/ie.png",
/* …add the rest… */
BLANK()
)
2. Select the Flag URL column → Column tools → set Data category = Image URL.
3. Show it in a Table/Matrix/Multi‑row Card (these render images).
4. To keep your bar chart but show flags on hover:
Create a small Tooltip page with a Table showing the Flag URL.
Solution 2: If you must see flags in the bars
Use a visual that supports images in categorical charts: Custom visual from AppSource that supports image fields, or Deneb (Vega‑Lite) to draw bars and place the image from your URL.
Minimal Deneb idea (fields: Country, Value, Flag URL):
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"name": "dataset"},
"layer": [
{
"mark": "bar",
"encoding": {
"y": {"field": "Country", "type": "nominal", "sort": "-x"},
"x": {"field": "Value", "type": "quantitative"}
}
},
{
"mark": {"type": "image", "width": 24, "height": 16},
"encoding": {
"url": {"field": "Flag URL"},
"y": {"field": "Country", "type": "nominal", "sort": "-x"},
"x": {"value": 0}, // draw images near the y‑axis
"tooltip": [{"field": "Country"}, {"field": "Value"}]
}
}
]
}
If you found this solution helpful, please consider accepting it and giving it a kudos (Like) it’s greatly appreciated and helps others find the solution more easily.
Best Regards,
Nasif Azam
Change the data category to Image URL
Hi @danextian , I already did that. Maybe thats not working because I used string concatenation with the country name. I want to concat the Flag instead.
That approach will not work. If the flag URL is simply combined with the country name, the result will be an invalid image link. The flag image and the country name need to be displayed separately, or the image can be included inside a DAX-generated SVG. AI can help create these SVGs, but DAX-generated SVGs do not allow images from external URLs. To use them, the images must first be converted to Base64 format, and those Base64 strings then imported back into Power BI before creating the SVG. This way, the images are embedded directly and will display correctly without relying on external sources. Alternatively, use image URLs that already contain the country name.