Blazor [Preview]
Demos
Support
Forum
Download
Search results

Ranges

You can categorizes certain interval on Circular Gauge axis using the CircularGaugeRanges tag.

Range start and end

The start and end values of a range in an axis can be customized using the Start and End properties.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40" End="80">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with custom range

Start width and end width

Using StartWidth and EndWidth properties, you can customize the start width and end width of the range.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40"
                                    End="80"
                                    StartWidth="2"
                                    EndWidth="20">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge range with start and end width

Changing color

The color of a range can be customized using the Color and Opacity properties.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40"
                                    End="80"
                                    StartWidth="2"
                                    EndWidth="20"
                                    Color="blue"
                                    Opacity="0.2">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge range with custom color

Rounded corners

You can customize the corner radius using the RoundedCornerRadius property in CircularGaugeRange.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40" End="80" RoundedCornerRadius="5">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge range with rounded corner

Radius

You can place a range inside or outside the axis using the Radius property. The radius of a range takes value either in percentage or in pixels. By default, a range take 100% of the axis radius.

In pixel

You can set a radius of the range in pixel as demonstrated as follows.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40" End="80" Radius="100px">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge range with custom radius

In percentage

By setting value in percentage, a range gets its dimension with respect to its axis radius. For example, when the radius is ‘50%’,the range is rendered to half of the axis radius.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="40" End="80" Radius="50%">
                </CircularGaugeRange>
            </CircularGaugeRanges>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge range with custom radius

Multiple ranges

You can add multiple ranges to an axis with the above customization as demonstrated as follows.

You can set the range color to ticks and labels of an axis by enabling the UseRangeColor property in CircularGaugeAxisMajorTicks, CircularGaugeAxisMinorTicks and CircularGaugeAxisLabelStyle tags.

@using Syncfusion.EJ2.Blazor.CircularGauge

<EjsCircularGauge>
    <CircularGaugeAxes>
        <CircularGaugeAxis>
            <CircularGaugeRanges>
                <CircularGaugeRange Start="0" End="25" Radius="108%">
                </CircularGaugeRange>
                <CircularGaugeRange Start="25" End="50" Radius="70%">
                </CircularGaugeRange>
                <CircularGaugeRange Start="50" End="75" Radius="70%">
                </CircularGaugeRange>
                <CircularGaugeRange Start="75" End="100" Radius="108%">
                </CircularGaugeRange>
            </CircularGaugeRanges>
            <CircularGaugeAxisLabelStyle UseRangeColor="true">
            </CircularGaugeAxisLabelStyle>
            <CircularGaugeAxisMinorTicks UseRangeColor="true"></CircularGaugeAxisMinorTicks>
        </CircularGaugeAxis>
    </CircularGaugeAxes>
</EjsCircularGauge>

Circular Gauge with multiple range

Previous
Next