GaugeBand is showing wrong values, when From/To are out of bound #93

Closed
opened 2026-01-29 17:31:25 +00:00 by claunia · 0 comments
Owner

Originally created by @belucha on GitHub (May 7, 2021).

Describe the bug
When using <RadzenRadialGauge> or <RadzenArcGauge> all values that are not within the Scales Min or Max property get rendered wrong.

e.g.
Min=25, Max=45, Value=4,7

image

To Reproduce

From the RadialGauge Sample Page:

        <RadzenRadialGauge Style="width: 100%; height: 300px;">
            <RadzenRadialGaugeScale StartAngle="-150" EndAngle="150" Step="20" Min="0" Max="260" TickPosition=@tickPosition>
                <RadzenRadialGaugeScalePointer Value=@value Length="0.6" ShowValue=@showValue>
                    <Template Context="pointer">
                        <h4>
                            @pointer.Value <sup>km/h</sup>
                        </h4>
                    </Template>
                </RadzenRadialGaugeScalePointer>
                <RadzenRadialGaugeScaleRange From="0" To="90" Fill="green" />
                <RadzenRadialGaugeScaleRange From="90" To="140" Fill="orange" />
                <RadzenRadialGaugeScaleRange From="140" To="1390" Fill="red" />
            </RadzenRadialGaugeScale>
        </RadzenRadialGauge>

Screenshots

image

Expected behavior

Values should be clipped.
image

Desktop:

  • Edge/Chrome
  • Net 5.0 / Server Side Blazor
Originally created by @belucha on GitHub (May 7, 2021). **Describe the bug** When using `<RadzenRadialGauge>` or `<RadzenArcGauge>` all values that are not within the Scales **Min** or **Max** property get rendered wrong. e.g. Min=25, Max=45, Value=4,7 ![image](https://user-images.githubusercontent.com/1666713/117453508-521a6d80-af45-11eb-81e8-19c6ac30ce57.png) **To Reproduce** From the RadialGauge Sample Page: ```razor <RadzenRadialGauge Style="width: 100%; height: 300px;"> <RadzenRadialGaugeScale StartAngle="-150" EndAngle="150" Step="20" Min="0" Max="260" TickPosition=@tickPosition> <RadzenRadialGaugeScalePointer Value=@value Length="0.6" ShowValue=@showValue> <Template Context="pointer"> <h4> @pointer.Value <sup>km/h</sup> </h4> </Template> </RadzenRadialGaugeScalePointer> <RadzenRadialGaugeScaleRange From="0" To="90" Fill="green" /> <RadzenRadialGaugeScaleRange From="90" To="140" Fill="orange" /> <RadzenRadialGaugeScaleRange From="140" To="1390" Fill="red" /> </RadzenRadialGaugeScale> </RadzenRadialGauge> ``` **Screenshots** ![image](https://user-images.githubusercontent.com/1666713/117455041-0c5ea480-af47-11eb-880e-ffeef161d8f4.png) **Expected behavior** Values should be clipped. ![image](https://user-images.githubusercontent.com/1666713/117455403-724b2c00-af47-11eb-824b-c8eb649e3946.png) **Desktop:** - Edge/Chrome - Net 5.0 / Server Side Blazor
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#93