SVG progress bar not showing unless it's 100%

[mhayata]

Unless the parameter progress is 100%, the progress bar is not showing. I'm having this problem with every SVG bullet chart I try.
Can anyone help me, please?

Code for Callout Progress:

Callout Progress =

--- Field to sort the measures by in a table ---

VAR SORT = DIVIDE(SUM(P32_AL[N_Res_gerados]),SUM(P32_AL[N_Res_calc]))*100

--- Progress Bar Info ---

VAR PERCENTAGEFILL = AVERAGE(P32_AL[Progresso])*100

VAR BarColour = "Navy"

RETURN

"data:image/svg+xml;utf8," &

"<svg desc = '" & SORT & "' width='100' height='30' viewBox='-2 -2 105 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' display= 'block'  overflow='visible'>

<rect id='track' x='0' y='15' rx='0' ry='0' width='100' height='10' fill='#D0D0D0' />

<rect id='fill' x='0' y='15' rx='0' ry='0' width="& "'"& PERCENTAGEFILL &"'"&" height='10' fill='"&BarColour&"'></rect>

<text x='0' y='8' font-weight='bold' font-family='Segoe UI, sans-serif' >"&FORMAT(PERCENTAGEFILL/100, "0%")&"</text>

</svg>"

Code for Teste 2:

// VAR MAXPlan = [Total de resultados]

VAR MAXActual = [Resultados gerados]

VAR MAXTarget = [Total de resultados]

VAR AXISRANGE = MAXX(

    {

        MAXActual,

        MAXTarget

    },

    [Value]

)

// VAR TRACKWIDTH = [%Resultados]*100

VAR PERCENTAGEFILL = AVERAGE(P32_AL[Progresso])*100

VAR PERCENTAGETARGET = MAXTarget/AXISRANGE*100

RETURN

"data&colon;image/svg+xml;utf8," & "

    <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' overflow='visible'>

        <rect id='track' x='0' y='2' width="&"'"&PERCENTAGETARGET&"'"&" height='20' fill='lightsteelblue'></rect>

        <rect id='fill' x='0' y='7' width="& "'"& PERCENTAGEFILL &"'"&" height='10' fill='blue'></rect>

        <rect id='marker' x="&"'"&PERCENTAGETARGET&"'"&" y='3' width='2' height='20' fill='red'/>

    </svg>

"

[lbendlin]

Please provide sample data that covers your issue or question completely, in a usable format (not as a screenshot).

Do not include sensitive information or anything not related to the issue or question.

If you are unsure how to upload data please refer to https://community.fabric.microsoft.com/t5/Community-Blog/How-to-provide-sample-data-in-the-Power-BI-...

Please show the expected outcome based on the sample data you provided.

Want faster answers? https://community.fabric.microsoft.com/t5/Desktop/How-to-Get-Your-Question-Answered-Quickly/m-p/1447...

[mhayata]

Hi, thanks for your reply!!
The .pbix can be downloaded using the link below:
https://we.tl/t-eRJDlW4ztI 

My expected outcome was a progress bar in every line, same as the picture below:

At the moment the progress bar only appears when it's at 100%.

[lbendlin · Accepted solution]

Callout Progress = 
--- Field to sort the measures by in a table ---
VAR SORT = DIVIDE(SUM(Dados[N_Res_gerados]),SUM(Dados[N_Res_calc]))*100
--- Progress Bar Info ---
VAR PERCENTAGEFILL = INT(AVERAGE(Dados[Progresso])*100)
VAR BarColour = "Navy"
RETURN
"data:image/svg+xml;utf8," & 
"<svg desc = '" & SORT & "' width='100' height='30' viewBox='-2 -2 105 20' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' display= 'block'  overflow='visible'>
<rect id='track' x='0' y='15' rx='0' ry='0' width='100' height='10' fill='#D0D0D0' />
<rect id='fill' x='0' y='15' rx='0' ry='0' width='" & PERCENTAGEFILL & "' height='10' fill='" & BarColour & "'></rect>
<text x='0' y='8' font-weight='bold' font-family='Segoe UI, sans-serif' >" & FORMAT(PERCENTAGEFILL/100, "0%") & "</text>
</svg>"

[mhayata]

Thank you soooo much!!! ❤️