SVG code causes Bypassing of the selection made in Slicer.

[tarunbisht20001]

Hello everyone,

I have a measure that uses SVG code, and I'm applying it within a matrix visual. However, when I add this measure to the visual, it causes the slicer selections to be bypassed. Please note that the bypassing isn't caused by the Red, Amber, and Green count measures, as I’ve tested by returning these individually, and they don’t cause any issues. I believe the problem lies within the SVG code. Could anyone help me with this?

StackedBarChart =

VAR BarHeight = 80  

VAR MaxWidth = 600

VAR BarY = 50

VAR FontSize = 43

VAR FontWeight = "bold"  

VAR MinWidth = MaxWidth * 0.15  

VAR Color1 = "#FF0000"  

VAR Color2 = "#FFC107"  

VAR Color3 = "#4CAF50"

VAR TextColor = "#000000"

VAR TotalValue = [Red Count] + [Amber Count] + [Green Count]

VAR Width1 = MAX(DIVIDE([Red Count], TotalValue, 0) * MaxWidth, MinWidth)

VAR Width2 = MAX(DIVIDE([Amber Count], TotalValue, 0) * MaxWidth, MinWidth)

VAR Width3 = MAX(DIVIDE([Green Count], TotalValue, 0) * MaxWidth, MinWidth)

VAR CountStr1 = IF([Red Count] = 0, "", FORMAT([Red Count], "#,0"))

VAR CountStr2 = IF([Amber Count] = 0, "", FORMAT([Amber Count], "#,0"))

VAR CountStr3 = IF([Green Count] = 0, "", FORMAT([Green Count], "#,0"))

VAR XPos1 = CALCULATE(0,KEEPFILTERS('SECTOR DATA FINAL'))

VAR XPos2 = IF([Red Count] > 0, XPos1 + Width1, 0)

VAR XPos3 = IF([Amber Count] > 0, XPos2 + Width2, IF([Red Count] > 0, XPos1 + Width1, 0))

VAR SVG =

    IF([Red Count] > 0,

        "<rect width='" & Width1 & "' height='" & BarHeight & "' x='" & XPos1 & "' y='" & BarY & "' fill='" & Color1 & "' />" &

        "<text x='" & (XPos1 + Width1 / 2) & "' y='" & (BarY + BarHeight / 2 + FontSize / 10) & "' font-family='Arial' font-size='" & FontSize & "' font-weight='" & FontWeight & "' fill='" & TextColor & "' text-anchor='middle'>" & CountStr1 & "</text>",

        ""

    ) &

    IF([Amber Count] > 0,

        "<rect width='" & Width2 & "' height='" & BarHeight & "' x='" & XPos2 & "' y='" & BarY & "' fill='" & Color2 & "' />" &

        "<text x='" & (XPos2 + Width2 / 2) & "' y='" & (BarY + BarHeight / 2 + FontSize / 10) & "' font-family='Arial' font-size='" & FontSize & "' font-weight='" & FontWeight & "' fill='" & TextColor & "' text-anchor='middle'>" & CountStr2 & "</text>",

        ""

    ) &

    IF([Green Count] > 0,

        "<rect width='" & Width3 & "' height='" & BarHeight & "' x='" & XPos3 & "' y='" & BarY & "' fill='" & Color3 & "' />" &

        "<text x='" & (XPos3 + Width3 / 2) & "' y='" & (BarY + BarHeight / 2 + FontSize / 10) & "' font-family='Arial' font-size='" & FontSize & "' font-weight='" & FontWeight & "' fill='" & TextColor & "' text-anchor='middle'>" & CountStr3 & "</text>",

        ""

    )

RETURN

    SVG

I am using this code to create an image based on the counts for red, amber, and green. If anyone has an alternative approach that would avoid the slicer bypassing issue, please let me know.

[rajendraongole1]

Hi @tarunbisht20001 -If the SVG code is overly complex or if the calculations are too intensive, consider simplifying the SVG code. Fewer conditions and more straightforward calculations can reduce potential performance issues:Use a basic representation first, then build complexity gradually.Ensure all calculations are efficient.

SVG code in Power BI does not always respect slicer filters, especially when using calculated variables and conditions that can bypass standard filter context.

Instead of using the SVG measure directly, consider creating separate measures for each part of the SVG that outputs numeric values. For example, create measures for the widths and counts separately, and visualize these numerically to ensure they return expected values before reintroducing SVG.

https://m.youtube.com/watch?v=QOcP5OvSwlI