Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Ranges in Blazor Linear Gauge component

28 Jul 2021 / 3 minutes to read

You can categorize the axis values using the Start and End properties in the LinearGaugeRange. You can add any number of ranges for an axis using array of range objects.

Copied to clipboard
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="50" End="80">
                </LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Ranges Sample

Ranges customization

Ranges can be customized using the following properties.

  • LinearGaugeRange
  • StartWidth - Specifies start width of the range
  • EndWidth - Specifies end width of the range
  • Color - Specifies color of the range
  • Position - Specifies the range bar position. Its possible values are ‘Position.Inside’, ‘Position.Outside’ and ‘Position.Cross’
  • Offset - Specifies offset value from its default position
  • LinearGaugeRangeBorder - Specifies range bar border color and width.
Copied to clipboard
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
<LinearGaugeAxes>
    <LinearGaugeAxis>
        <LinearGaugeRanges>
            <LinearGaugeRange Start="50"
                              End="80"
                              StartWidth="2"
                              EndWidth="15"
                              Color="orange"
                              Position="Position.Inside"
                              Offset="4">
                <LinearGaugeRangeBorder Color="red" Width="2"></LinearGaugeRangeBorder>
            </LinearGaugeRange>
        </LinearGaugeRanges>
    </LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Range customization Sample

Multiple ranges

You can add multiple ranges to an axis as demonstrated in the following code sample.

Copied to clipboard
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge>
<LinearGaugeAxes>
    <LinearGaugeAxis>
        <LinearGaugeRanges>
            <LinearGaugeRange Start="1"
                              End="30"
                              StartWidth="10"
                              EndWidth="10"
                              Color="#41f47f">
            </LinearGaugeRange>
            <LinearGaugeRange Start="30"
                              End="50"
                              StartWidth="10"
                              EndWidth="10"
                              Color="#f49441">
            </LinearGaugeRange>
            <LinearGaugeRange Start="50"
                              End="80"
                              StartWidth="10"
                              EndWidth="10"
                              Color="#cd41f4">
            </LinearGaugeRange>
        </LinearGaugeRanges>
    </LinearGaugeAxis>
</LinearGaugeAxes>
</SfLinearGauge>

Linear Gauge with Multiple ranges Sample

Gradient Color

Gradient support allows to add multiple colors in the range and pointer of the linear gauge. The following gradient types are supported in the linear gauge.

  • Linear Gradient
  • Radial Gradient

Linear Gradient

Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the StartValue property. The end value of the linear gradient will be set using the EndValue property. The color stop values such as color, opacity and offset are set using ColorStop property.

To apply linear gradient to the range, follow the below code sample.

Copied to clipboard
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Orientation="Orientation.Horizontal">
<LinearGaugeContainer Width="30" Offset="30">
<LinearGaugeAxes>
    <LinearGaugeAxis>
        <LinearGaugeAxisLabelStyle Offset="55">
           <LinearGaugeAxisLabelFont Color="#424242"/>
        </LinearGaugeAxisLabelStyle>
        <LinearGaugeLine Width="0"/>
        <LinearGaugeMajorTicks Height="0" Interval="25"/>
        <LinearGaugeMinorTicks Height="0"/>
        <LinearGaugePointers>
            <LinearGaugePointer Value="80" Height="25" Width="35"  Offset="-40" Color="#f54ea2"               MarkerType="MarkerType.Triangle"
                    Placement="Syncfusion.Blazor.LinearGauge.Placement.Near">
            </LinearGaugePointer>
        </LinearGaugePointers>
        <LinearGaugeRanges>
            <LinearGaugeRange Start="0" End="80" StartWidth="30" EndWidth="30" Offset="30" LinearGradient="@RangeLinearModel">
            </LinearGaugeRange>
        </LinearGaugeRanges>
    </LinearGaugeAxis>
</LinearGaugeAxes>
</LinearGaugeContainer>
</SfLinearGauge>
@code {
public static LinearGradient RangeLinearModel = new LinearGradient() {
    StartValue = "1%",
    EndValue = "99%",
    ColorStop = new List<ColorStop>() {
        new ColorStop { Opacity=1, Color= "#fef3f9", Offset="1%" },
        new ColorStop { Opacity=1, Color= "#f54ea2", Offset="100%" }
    }
};
}

Radial Gradient

Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the InnerPosition property. The outer circle position of the radial gradient can be set using the OuterPosition property. The color stop values such as color, opacity and offset are set using ColorStop property.

To apply radial gradient to the range, follow the below code sample.

Copied to clipboard
@using Syncfusion.Blazor.LinearGauge

<SfLinearGauge Orientation="Orientation.Horizontal">
<LinearGaugeContainer Width="30" Offset="30">
<LinearGaugeAxes>
    <LinearGaugeAxis>
        <LinearGaugeAxisLabelStyle Offset="55">
           <LinearGaugeAxisLabelFont Color="#424242"/>
        </LinearGaugeAxisLabelStyle>
        <LinearGaugeLine Width="0"/>
        <LinearGaugeMajorTicks Height="0" Interval="25"/>
        <LinearGaugeMinorTicks Height="0"/>
        <LinearGaugePointers>
            <LinearGaugePointer Value="80" Height="25" Width="35"  Offset="-40" Color="#f54ea2"               MarkerType="MarkerType.Triangle"
                Placement="Syncfusion.Blazor.LinearGauge.Placement.Near">
            </LinearGaugePointer>
        </LinearGaugePointers>
        <LinearGaugeRanges>
            <LinearGaugeRange Start="0" End="80" StartWidth="30" EndWidth="30" Offset="30" RadialGradient="@RangeRadialModel">
            </LinearGaugeRange>
        </LinearGaugeRanges>
    </LinearGaugeAxis>
</LinearGaugeAxes>
</LinearGaugeContainer>
</SfLinearGauge>
@code {
public static RadialGradient RangeRadialModel = new RadialGradient() {
    Radius="65%",
    OuterPosition = new OuterPosition(){ X="50%", Y="70%"},
    InnerPosition = new InnerPosition() { X="60%", Y="60%" },
    ColorStop = new List<ColorStop>() {
        new ColorStop { Opacity=0.9, Color= "#fff5f5", Offset="5%" },
        new ColorStop { Opacity=1, Color= "#f54ea2", Offset="99%" }
    }
};
}
Previous
Next