How can I remove the empty space above the RadialGauge controls?

Radzen.Blazor Components
1

As shown in the screen capture, there is a large blank space above the RadialGauge controls that is neither padding nor margin. It appears to be in the svg itself.

image
image730×572 26.3 KB

Here is an excerpt from my code.

<div class="row m-0" style="color:black; font-size:large; font-weight:bold">
    <div class="col m-0 center-block" style="text-align:center;">
        <h2 class="mt-2 mb-0">Incoming</h2>
        <h3 class="m-0">Messages / Minute</h3>
    </div>
</div>
<div class="row" style="color:black; font-size:large; font-weight:bold">
    <div class="col">
        <RadzenRadialGauge Name="IncomingGauge" Style="width: 100%;">
            <RadzenRadialGaugeScale Step="50" Min="0" Max="500" MinorStep="5" Radius="0.9" StartAngle="-90" EndAngle="90" ShowFirstTick="true" Y="0.9" Margin="0">
                <RadzenRadialGaugeScaleRange From="0" To=@inputErrors Fill="red" StrokeWidth="16" />
                <RadzenRadialGaugeScaleRange From=@inputErrors To=@(inputErrors+ignored) Fill="orange" StrokeWidth="16" />
                <RadzenRadialGaugeScaleRange From=@(inputErrors+ignored) To=@(inputErrors+ignored+processed) Fill="green" StrokeWidth="16" />
                <RadzenRadialGaugeScalePointer Value=@(inputErrors+ignored+processed) Fill="black" Width="4" ShowValue="false" />
            </RadzenRadialGaugeScale>
        </RadzenRadialGauge>
    </div>
</div>

How can I make this unwanted space go away?

2

This capture shows why I said it appears to be in the svg itself.

image

3

Try setting the height of the gauge and Radius to 2:

        <RadzenRadialGauge Name="IncomingGauge" Style="width: 100%; height: 150px">
            <RadzenRadialGaugeScale Step="50" Min="0" Max="500" MinorStep="5" Radius="2" StartAngle="-90" EndAngle="90" ShowFirstTick="true" Y="0.9" Margin="0">
                <RadzenRadialGaugeScaleRange From="0" To=@inputErrors Fill="red" StrokeWidth="16" />
                <RadzenRadialGaugeScaleRange From=@inputErrors To=@(inputErrors+ignored) Fill="orange" StrokeWidth="16" />
                <RadzenRadialGaugeScaleRange From=@(inputErrors+ignored) To=@(inputErrors+ignored+processed) Fill="green" StrokeWidth="16" />
                <RadzenRadialGaugeScalePointer Value=@(inputErrors+ignored+processed) Fill="black" Width="4" ShowValue="false" />
            </RadzenRadialGaugeScale>
        </RadzenRadialGauge>

image
image810×484 30.1 KB

By default the gauge occupies half of the available height and you can use Radius as a multiplier to control that.

4

That did it.

image
image738×430 24.8 KB

Now, is there a way to make the colored Ranges thicker? Setting the StrokeWidth doesn't seem to do it.

5

StrokeWidth requires Stroke to be set as well (it is something like border-width which requires border-color to be set) .

However for your case you probably need to set the Height of the scale range:

        <RadzenRadialGauge Name="IncomingGauge" Style="width: 100%; height: 150px">
            <RadzenRadialGaugeScale Step="50" Min="0" Max="500" MinorStep="5" Radius="2" StartAngle="-90" EndAngle="90" ShowFirstTick="true" Y="0.9" Margin="0">
                <RadzenRadialGaugeScaleRange From="0" To=@inputErrors Fill="red" Height="20" />
                <RadzenRadialGaugeScaleRange From=@inputErrors To=@(inputErrors+ignored) Fill="orange" Height="20" />
                <RadzenRadialGaugeScaleRange From=@(inputErrors+ignored) To=@(inputErrors+ignored+processed) Fill="green" Height="20" />
                <RadzenRadialGaugeScalePointer Value=@(inputErrors+ignored+processed) Fill="black" Width="4" ShowValue="false" />
            </RadzenRadialGaugeScale>
        </RadzenRadialGauge>

image
image956×464 30.4 KB

6

One last question on this control - I'd like to remove the drop-down icons, since the control works just fine without them.

image
image717×447 27.4 KB

7

What control is that?

8

Sorry I meant to add code after the screen shot.

<div class="col-2 center-block">
    <RadzenMenu Style="margin:0px;">
        <RadzenMenuItem Icon="menu" Style="color:black;background-color:white;">
            <RadzenMenuItem Text="View Connector Detail" Icon="pageview" Style="color:black;background-color:white;" />
        </RadzenMenuItem>
    </RadzenMenu>
</div>

<div class="col center-block" style="font-size:28px; font-variant:small-caps; font-weight:bold; margin:0px; text-align:center;">
    <p>XXXXXXXX Connector</p>
</div>

<div class="col-2 center-block">
    <RadzenMenu Style="margin:0px;">
        <RadzenMenuItem Icon="menu" Style="color:black;background-color:white;">
            <RadzenMenuItem Text="View Error Detail" Icon="pageview" Style="color:black;background-color:white;" />
        </RadzenMenuItem>
    </RadzenMenu>
</div>
9

You can hide this icon with CSS.

.rz-navigation-item-icon-children {
   display: none;
}