logos/images in stacked bar

[dobregon1988]

Hi guys,

i'm trying to doing something like this (picture exmaple from one guy in the forum that is usefull to explain)

the idea is more simple. to have a stacked column chart and bellow for each bar... the logo. stacked column chart doesnt allow to do that.

i have tried many many this and i have tried inphografic designer visual, and it works... for many columns but once the stacked bar has less than 10 columns it is not usefill becasue it seems that the infografic has a maximo widht for eeach bar that it is not the maximo of the stacked and we cant work o thant

is there any options of this?

regards

[dobregon1988 · Accepted solution]

@Amar_Kumar @HarishKM @v-menakakota @cengizhanarslan @krishnakanth240 thanks a lot for the responses, sorry for not answer this week but i had problems with my coorporate pwd and as you know... during these weeks it is dificult to solve by IT. But i was working with my personal account and this are the problems that i have found.

First in first, my english is not the best and it is 2nd January, so a little bit hangover.

Context

• It is a stacked (2 stacks) columns comparator between competitors (for that reason need logos, could be companies.. could be logos from projects.. whatever with a logo that you want to add)
• Logos it is important, in the past this project have the logos manually picture a picture, that means every time that they need to send the report, they need to open, check the order and move the logos manually. CRAZY time.
• The color of each bar need to be predefined. so, that means. competitor 1 is red, competitor 2 is blue, etc. imagine.... 250 or more.
• Need to be autoescale like the original visual.. that means if you filter 5 bars only, the bars will be more greater and the logo, should be scale to.
• Need to have scroll bar when we see imagine more than 20 bars and the width of each bar need to be decrease
• Then i need to add more fields la summary labels for each bar in a same Y position for each one. 
• I doesnt have any idea of java script, but i'm very curious and i can validate the response of chatgpt to be in the correct way.
  
  Knowing the context, here are my analysis and conclusions.
  About my conclusions related to what is missing in each solution, take into account, that maybe i'm wrong and i didnt found the way to do that, but asking and searching many things i didnt found the solucion; so, correct me if i'm wrong.

Let's explain:

1. Charticulator / deneb --> I dedicate among 6-8h each one. Charticulator is 100% more friendly that deneb that it is pure code. In both of them i can configure bar widths, logos(deneb), automatic colors, the especial labes, etc, that it is great and magic, but it doesnt have other needs that are important and in the coorporate.. you know that a minimum thing can block the project......  
   
   • It can't be autoscale the width bars and logos.
   • It can't be automatic the position the especial labels totalizers (something like, differences bettwen today and last week)
   • Logos can't be autoscale too
   • Not scroll bar, everthing is printed in the space of the visual.
   • Charticulator, doesnt work with my logos (base64) becasue the chart has a eje X categorical.... really i dont know why but i didnt find solution. for that reason charticulator was discarded and i moved to deneb.
     
     
2. Mixture -- Stacked bar + infographic.
   I think this could be the "solution"... As i'm using stacked bar, i have the functionalities of stacked bar so everthing good. Infographic allows my to add logos (image url same than charticulator/deneb) by my category and i can order by tooltip. So, in reality i can have a logo for each bar. Let's go to the problems
   • Colors: I can have automatic colors, you need to predifine in the visual... ok,
     • but if new competitor appears in the ddbb? you need to open the file, put color, republish, etc.
     • Ok, but you can use themes? right, but same problem when a new competitor.
     • Ok, if this is the only prolbem, we can discuss with the team and ok, no colors.. same for competitors and one for us. 
   • Align logos and bars --> You can remove Yaxis, padding etc, but the infografich oesnt allign very well with the bars, and every time that you need to use both visual you need to work in the scale and align, becasue if you use the same visuals in other tabs but different size, you need to align. but.. ok....? the problem is more higher, when your model can filter the stacked by showing 5 columns or showing 200 columns.. so... ok..
   • Soecial labels.. in reality, is to create another stacked bar and put below of the original and that works). So problably mi visual will be a mixture of 2 stakde bards + infografich.
     
     So, at the end.. it could be the solution. smae colors and with logos. ok.

Final decision.
But I'm not very confortable with that and i have time during holidays (and after 20h in front of the pc) i have created a custom visual from 0 using VS Code, PBIviz, node.js... etc and that are the features that i have solved with the custom visual?

1. Column bars - autoscale --> format panel with the options of minimum and maximun width.
2. Columns bars - color --> I have a column that define the ColorHEX for each bar. (same color for both stack in the same bar) and i have added the % opacity from 0 to 100% in each stack.
   1. Why color by ColorHEX is important? people whant to have the color for each bar, and it is in the ddbb, so in reality if they need to change the color, they change in the ddbb and after refresh, the powerbi will use that colors. what does mean? i dont need to work anymore if they change the color.
3. Logos --> Autoescale and logo_base64 from database. benefits?
   1. Autoescale -- i have added % of the column width, minium and maximum scale logo, offset (to put the Y position).
   2. Logo64 -- as it is in the database, i dont need to work when the team need to change or add new competitor with logo. they add in the database and automatically flows to the powerbi. 
   3. Order -- they follow the order of the visual as it is in the visual, so each logo for each bar.
4. Espcial labels (vs last week, vs last month)-- i have created 2 labels more that follow the smae Y position i have added another measure to follow the color (negative red and positive black or whatever you want, is a measur that you define the HEX color)
5. It is responsive crossfiltering with other visuals.
6. Custom visuals have problems because they can't detect your number formating of your Sfotware (windows, mac, language of BI, chrome, etc) about (decimals and thousand separators) so i have added in each label of the format pane the option to select the decimal and thousen separator (comma, dot, space). 

Probably i'm lossing more benefits, but i'm very happy with my work on this.

In the future if someone have similar issue or something i recommend stacked bars + infograpich as a first approach, becasue more times.. you dont have much time to develop things and in my opinion, the solution will never be create a custom visual each time, you need to avoid that and work with that you have. i do that becasue i have time, but problably stacked bar and infographic lossing the autocolors, could be my easy solutions and the coorporate will acept this

In any case i can be wrong in my analysis, i have tried to explain my decisions and solutiosn related to my analysis but i'm not an expert and maybe someone of microsoft or other people said... o by denef have scroll or something ... ok but chatgpt and copilot didn't give me that explanation or google ajjajjj

happy new year!

[v-menakakota]

Hi @dobregon1988 ,

Thank you for the update and wish you happy new year.

[HarishKM]

@dobregon1988 Hey,

Native Power BI charts can’t put logos under each stacked bar. Use Deneb (Vega-Lite) or Charticulator to compose a stacked column plus a synchronized logo strip. Deneb is the most robust and easy to maintain.

Option A — Deneb (recommended)
What you need in your model

• Fields: Category (your bar/group), Segment (stack series), Value (measure), LogoURL (https, or data URI like data:image/png;base64,...).
• Sort Category as required.

Steps
1) Get Deneb from AppSource and add it to the report.
2) Drop these fields into the Deneb visual (Fields pane):
- Category
- Segment
- Value (sum)
- LogoURL

3) Open Deneb editor and paste this Vega-Lite spec. It vertically concatenates a stacked bar chart with a logo strip that shares the same x-scale, so logos always align with bars (even if you have fewer than 10 categories).

{

  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {"name": "dataset"},

  "resolve": {"scale": {"x": "shared"}},

  "vconcat": [

    {

      "height": 260,

      "mark": {"type": "bar"},

      "encoding": {

        "x": {

          "field": "Category",

          "type": "nominal",

          "axis": {"title": null, "label": false}

        },

        "y": {

          "aggregate": "sum",

          "field": "Value",

          "type": "quantitative",

          "stack": "zero",

          "axis": {"title": null}

        },

        "color": {

          "field": "Segment",

          "type": "nominal",

          "legend": {"title": null}

        },

        "tooltip": [

          {"field": "Category", "type": "nominal"},

          {"field": "Segment", "type": "nominal"},

          {"aggregate": "sum", "field": "Value", "type": "quantitative"}

        ]

      }

    },

    {

      "height": 60,

      "mark": {"type": "image", "width": 40, "height": 40},

      "encoding": {

        "x": {

          "field": "Category",

          "type": "nominal",

          "axis": {"title": null, "label": false}

        },

        "url": {"field": "LogoURL"},

        "y": {"value": 30}

      }

    }

  ],

  "config": {

    "view": {"stroke": null},

    "axis": {"labelFontSize": 11}

  }

}

Notes

• Logo size: adjust the bottom mark width/height (e.g., 50–70) or panel height.
• If you need exact brand colors or different bar spacing, tune config.axis and scale.bandPadding.
• Image sourcing:

- Prefer https links reachable from report consumers (no auth prompts).
- For guaranteed rendering, store base64 in a column and use data URIs: "data:image/png;base64," & [Base64Logo].

• Sorting: add "sort" on x to a column (e.g., SortOrder) to control bar order consistently with logos.

Option B — Charticulator

• Build a stacked bar glyph and add an image mark anchored to the category, positioned below the bars. Export as a custom visual. Great control, but Deneb is generally simpler and more portable.

Workarounds to avoid

• Infographic Designer: as you noticed, bar width behavior doesn’t stay in sync with stacked bars when category count changes.
• Two visuals (stacked bar + table/matrix of images) aligned manually: brittle and hard to keep perfectly aligned.

Conclusion
Use Deneb with a vconcat layout and shared x-scale. It reliably keeps logos centered under each stacked column across any number of categories, with full control over size, spacing, and style.

If this post helps, then please consider Accepting it as the solution to help the other members find it more quickly.

Thanks

Harish Mishra

Harish Kumar Mishra | LinkedIn

[cengizhanarslan]

Power BI’s native stacked column chart can’t show images/logos as category labels under each bar. So you need a workaround.

Best options:

1. Use a custom visual designed for images

• Deneb (Vega-Lite): most flexible. You can draw the stacked columns and add an image row under the x-axis using image URLs.

• (If you already tried Infographic Designer and hit sizing limits, Deneb is usually the next step.)

1. Fake the logos row with a second visual

• Keep your normal stacked column chart.

• Add a Table/Matrix (or another small custom visual) underneath that shows the logo image per category.

• Turn off headers/gridlines, make it look like x-axis labels.

• This is the simplest “no custom charting” approach, but alignment can be tricky.

1. Use icons instead of logos
   If a simple icon works, you can use Unicode or SVG text in a label, but true logos generally require images.

What you can’t do: native stacked column + image labels in one visual.

[v-menakakota]

Hi @dobregon1988 
Thanks for reaching out to the Microsoft fabric community forum. 

I would also take a moment to thank @cengizhanarslan , @krishnakanth240  and @Amar_Kumar   , for actively participating in the community forum and for the solutions you’ve been sharing in the community forum. Your contributions make a real difference.

I hope the above details help you fix the issue. If you still have any questions or need more help, feel free to reach out. We’re always here to support you .

Best Regards, 
Community Support Team 

[v-menakakota]

Hi @dobregon1988 ,

I hope the above details help you fix the issue. If you still have any questions or need more help, feel free to reach out. We’re always here to support you .

Best Regards, 
Community Support Team 

[krishnakanth240]

Hi @dobregon1988 

Yes, this is a known limitation in Power BI
A native stacked column/bar chart cannot show images (logos) on the axis.

Why it is not possible?
X-axis / category labels do not support images
Stacked charts cannot bind image URLs
Infographic Designer has fixed bar width limits
So the behavior you are seeing is expected.

1) Chart + Logo Table
Recommended for production reports
Create your stacked column chart (no logos)
Create a Table or Matrix below it
Single column with Image URL (logo)
Category aligned with chart bars
Remove headers, borders, gridlines
Carefully align widths

Fully responsive
No bar-width issues
Works with slicers
Looks native when aligned

2) Use a Tooltip with Logo
Good UX without clutter
Create a Tooltip page
Add:
Logo (Image URL)
Category name
Metrics
Hover on each stacked bar to see the logo

Clean
Interactive
Logo not always visible

Please mark this as a solution with Headup if it is completed otherwise please let us know.  Thank You!

[Amar_Kumar]

@dobregon1988 If this clears your doubt please mark it as a accepted solution.

[Amar_Kumar]

@dobregon1988 

Your understanding is correct. There is no native way in Power BI to show logos or images below each bar in a stacked column chart.

Corrections / clarifications:

1.) Stacked column charts do not support images on the X-axis

2.) There is no setting or workaround inside the native visual to enable this

3.)Infographic Designer is the only single-visual option, but it has fixed sizing limits and breaks when the number of bars is small

4.) This is a limitation of the visual, not your setup

Workaround:

Two-visual workaround :-

1.) Top visual: stacked column chart

2.) Bottom visual: table or matrix with category and logo (image URL)

3.) Align both visuals

4.) Turn off headers, gridlines, and backgrounds