Infographic Designer - Filling in multiple images

Hi,

What you are seeing with Infographic Designer is expected behavior when using a multi-layered base image. When you apply fill on a single image, the visual does not normalize the non-filled area to one flat color. Instead, it keeps the original pixel shading from the base image. That is why the grey color looks different across segments — it is inheriting the original gradient or shading from the image layers.

When you switch to separate images per block, Infographic Designer treats each image as an independent fill container. Because of that, it cannot naturally synchronize them to behave like one single progress bar driven by one metric.

For this scenario, I would suggest considering one of these alternative approaches:

1️⃣ Deneb (Vega-Lite) — Single metric driving multiple segments

If your goal is “one measure → controls all blocks together”, Deneb is usually the cleanest solution.

Concept:

• Create one measure, for example:
  Progress = DIVIDE([Actual], [Target])

• In Deneb, draw each block as a separate segment (rect or polygon).

• Control fill color based on the progress value.

• Set a fixed empty color (for example #BDBDBD) so empty areas are always uniform.

Advantages

• Full control over colors, labels, thresholds, tooltips

• No dependency on image shading

• Scales well if you later need more segments

Tradeoff

• Requires some Vega-Lite knowledge initially

2️⃣ SVG generated via DAX (Image rendering in Table / Matrix)

If you want infographic-level control without building a full custom visual, SVG is extremely powerful.

Concept:

• Create a DAX measure that returns an inline SVG string.

• Each block is drawn using <rect> or <path>.

• Width / area of filled portion is controlled by progress.

• Render SVG inside a table or matrix visual.

Advantages

• No external visual dependency

• Pixel-level control

• Very stable once implemented

Tradeoff

• Initial setup effort (especially for complex shapes)

3️⃣ Custom Visual Development (Most robust long-term solution)

If this is a repeatable reporting pattern across many reports, building a custom visual might be worth it.

Concept:

• Visual reads a shape definition (JSON or SVG path list).

• One progress measure controls all shapes.

• Supports uniform empty color, filled color, optional segment weighting.

Advantages

• Best user experience

• Fully reusable component

Tradeoff

• Development and maintenance cost

Quick workaround if you must stay with Infographic Designer

If you want to keep using Infographic Designer, you could:

• Re-export the base image as a flat single-tone grey (remove all shading)

• Use transparent mask layers for the fill area

However, achieving “multi-segment + single measure + perfectly uniform empty color” is typically outside the natural design of this visual.

If you can share whether your blocks are simple rectangular shapes or complex custom shapes, I can suggest either:

• A starter Deneb spec, or

• A reusable SVG DAX template.

Hope this helps.