Blazor [Preview]
Demos
Support
Forum
Download
Search results

Ranges

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.

@using Syncfusion.EJ2.Blazor.LinearGauge

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

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’ and ‘Position.Outside’
    • Offset - Specifies offset value from its default position
    • LinearGaugeRangeBorder - Specifies range bar border color and width.
@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <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>
</EjsLinearGauge>

Linear Gauge with Range customization Sample

Multiple ranges

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

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <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>
</EjsLinearGauge>

Linear Gauge with Multiple ranges Sample

Previous
Next