Search results

Axes

Axes is a collection of linear axes that can be used to indicate the numeric values. Line, ticks, labels, ranges, and pointers are the sub elements of an axis.

Minimum and maximum

You can configure the start and end value of the linear gauge axis using Minimum and Maximum properties.

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="40" Maximum="80">
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear gauge with minimum and maximum values

Line customization

You can customize the linear gauge line using following properties.

  • LinearGaugeLine

    • Height - Specifies height of the line
    • Width - Specifies width of the line
    • Color - Specifies color of the line
    • Offset - Specifies offset position from the default position of the line
    • DashArray - Specifies dash array line type
@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeLine Height="150"
                             Width="2"
                             Color="#4286f4"
                             Offset="2">
            </LinearGaugeLine>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Line Customization Sample

Ticks customization

You can customize the LinearGaugeMajorTicks and LinearGaugeMinorTicks using following properties.

  • Height - Specifies height of the ticks
  • Width - Specifies width of the ticks
  • Color - Specifies color for the ticks
  • Interval - By default, interval for major and minor ticks will be calculated automatically. You can customize the interval for these ticks using this property
  • Offset - Specifies offset position from the default position of the ticks
@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeMajorTicks Color="red"
                                   Interval="20"
                                   Height="20"
                                   Width="4">
            </LinearGaugeMajorTicks>
            <LinearGaugeMinorTicks Color="orange"
                                   Interval="5"
                                   Height="10"
                                   Width="2"
                                   Offset="-2">
            </LinearGaugeMinorTicks>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with ticks customization

Labels customization

The LinearGaugeAxisLabelStyle tag provides options to customize the offset, format, color and font of the axis labels.

Label format

Axis labels can be formatted by using the Format property in LinearGaugeAxisLabelStyle and it supports all the globalized formats.

Label Value Label Format property value Result Description
1000 n1 1000.0 The Number is rounded to 1 decimal place
1000 n2 1000.00 The Number is rounded to 2 decimal place
1000 n3 1000.000 The Number is rounded to 3 decimal place
0.01 p1 1.0% The Number is converted to percentage with 1 decimal place
0.01 p2 1.00% The Number is converted to percentage with 2 decimal place
0.01 p3 1.000% The Number is converted to percentage with 3 decimal place
1000 c1 $1,000.0 The Currency symbol is appended to number and number is rounded to 1 decimal place
1000 c2 $1,000.00 The Currency symbol is appended to number and number is rounded to 2 decimal place

Also you can customize ‘font’ and ‘offset’ of the labels as shown below.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge Format="c">
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeAxisLabelStyle Format="c1"
                                       Offset="-5">
                <LinearGaugeAxisLabelFont FontStyle="italic"
                                          FontWeight="bold">
                </LinearGaugeAxisLabelFont>
            </LinearGaugeAxisLabelStyle>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear gauge with label format

Custom label format

Axis also supports custom label format using placeholder like {value}°C, in which the value represents the axis label. e.g., 20°C.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum ="20" Maximum ="140">
            <LinearGaugeAxisLabelStyle Format= "{value}°C">
            </LinearGaugeAxisLabelStyle>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Custom label format

Ranges color for labels

You can also set the ranges color to the corresponding labels using UseRangeColor property.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis>
            <LinearGaugeAxisLabelStyle UseRangeColor="true">
            </LinearGaugeAxisLabelStyle>
            <LinearGaugeRanges>
                <LinearGaugeRange Start="0" End="30" Color="orange"></LinearGaugeRange>
                <LinearGaugeRange Start="30" End="60" Color="red"></LinearGaugeRange>
                <LinearGaugeRange Start="60" End="100" Color="blue"></LinearGaugeRange>
            </LinearGaugeRanges>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear gauge label with range color

Inverted axes

The isInversed property is used to choose the rendering of axis either in bottom to top or in top to bottom direction.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis IsInversed="true">
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Inverted Axis Sample

Opposed axes

To place an axis opposite from its original position, set the OpposedPosition property to true in the axis.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis OpposedPosition="true">
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Opposed Position Sample

Multiple axes

You can render any number of axis for a linear gauge using multiple LinearGaugeAxis. Each axis will have its own ranges, pointers, annotations, and customization options.

@using Syncfusion.EJ2.Blazor.LinearGauge

<EjsLinearGauge>
    <LinearGaugeAxes>
        <LinearGaugeAxis Minimum="20" Maximum="100">
            <LinearGaugeAxisLabelStyle Format="{value}°C">
            </LinearGaugeAxisLabelStyle>
        </LinearGaugeAxis>
        <LinearGaugeAxis Minimum="20" Maximum="100" OpposedPosition="true">
            <LinearGaugeMajorTicks Interval="20" Height="20">
            </LinearGaugeMajorTicks>
            <LinearGaugeMinorTicks Interval="5" Height="10">
            </LinearGaugeMinorTicks>
            <LinearGaugeAxisLabelStyle Format="{value}°C">
            </LinearGaugeAxisLabelStyle>
        </LinearGaugeAxis>
    </LinearGaugeAxes>
</EjsLinearGauge>

Linear Gauge with Multiple Axis Sample