Progress Value Text Color

[Leigh]

Hi all,

Just wondering how I change the progress value text color, currently I use the following in my progress bars:

<SfProgressBar ShowProgressValue="true" Height="250px" Width="250px" Type="ProgressType.Circular" Value="@request.PercentComplete" ProgressColor="@progresscolorfailed" Minimum="0" Maximum="100" TrackThickness="28" ProgressThickness="30">

I think I use something like the below however I can't work out how to re use the Value when it's inside the HTML:

<ProgressBarAnnotations>

                                <ProgressBarAnnotation Content="<div style='color:#ffffff;fill:#ffffff'><span></span></div>" />

                            </ProgressBarAnnotations>

I can see that the fill color is what I need to change in the CSS:

<text id="progressbarztoqgx4xmnl_circularLabel" font-size="20" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="middle" fill="#333333" x="125" y="137" width="230" height="230">37%</text>

Any help would be awesome.

Regards,

Leigh.

[Durga Gopalakrishnan]

Hi Leigh,

Greetings from Syncfusion.

We have analyzed your query with provided code snippet. You can either use annotation or progress bar text to display the value and you can also customize the text style. We have prepared sample for your reference. In sample, we have rendered 2 progress bars one with text and another one with annotation. 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/ProgBar-1251510730.zip

Kindly revert us if you have any concerns.

Regards,

Durga G

[Leigh]

Thank you for the reply, worked a treat. 

[Leigh]

Is there a way to align the text better in a progress bar, using the following:

    <SfProgressBar ShowProgressValue="true" Height="180px" Width="180px" Type="ProgressType.Circular" Value="@request.PercentComplete" ProgressColor="@progresscolorfailed" Minimum="0" Maximum="100" TrackThickness="17" ProgressThickness="18">

                                        <ProgressBarLabelStyle Color="var(--White)" Size="36px" FontWeight="bold"></ProgressBarLabelStyle>

                                    </SfProgressBar>

I can see the following HTML:

<text id="progressbaruf3hbeerbbz_circularLabel" font-size="36px" font-style="Normal" font-family="Segoe UI" font-weight="bold" text-anchor="middle" fill="var(--White)" x="90" y="117" width="160" height="160" visibility="visible" style="">20%</text>

Which renders the text off center: 

Is there a way to set y="117" to a custom value?

[Durga Gopalakrishnan]

Hi Leigh,

We analyzed your reported scenario. We have considered it as bug and logged a defect report. This fix will be available in our upcoming weekly patch release which is scheduled to be rolled out on 5th January2020. We appreciate your patience until then. You can keep track of the bug from the feedback portal below.  

  

Feedback Link : https://www.syncfusion.com/feedback/20521/ 

  

The provided feedback link is private, and you need to login to view this feedback. 

  

If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

Regards,

Durga G

[Durga Gopalakrishnan]

Hi Leigh,

We are working on reported issue. We will include the fix for reported issue in our upcoming Volume 4 SP Release which is expected to be rolled out at end of January 2021. We appreciate your patience until then.

Regards,

Durga G

[Durga Gopalakrishnan]

Hi Leigh,

We are glad to announce that our v18.4.39 patch release is rolled out, we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version. 

  

Package : https://www.nuget.org/packages/Syncfusion.Blazor 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards,

Durga G