Blazor
Demos
Support
Forum
Download
Search results

Type of Data in Blazor Range Navigator component

Numeric

Numeric scale is used to represent the numeric values of data in a range navigator. By default, the ValueType of a range navigator is Double.

double.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType=Syncfusion.EJ2.Blazor.Charts.RangeValueType.Double>
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Day" Type="RangeNavigatorType.StepLine" 
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code{

    int[] Value = new int[] { 20, 50 };
    
    public class Data
    {
        public double Day;
        public double Close;
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data {  Day = 12, Close = 28 },
        new Data {  Day = 34, Close = 44 },
        new Data {  Day = 45, Close = 48 },
        new Data {  Day = 56, Close = 50 },
        new Data {  Day = 67, Close = 66 },
        new Data {  Day = 78, Close = 78 },
        new Data {  Day = 89, Close = 84 }
    };
}

Numeric

Range

Minimum and maximum of the scale will be calculated automatically based on the provided data. You can also customize the range using the Minimum, Maximum, and Interval properties.

range.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Interval="10" Value="@Value" ValueType=Syncfusion.EJ2.Blazor.Charts.RangeValueType.Double>
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.StepLine" YName="Close">
        </RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {

    int[] Value = new int[] { 60, 100 };

    public class Data
    {
        public double Date;
        public double Close;
    }

    public List<Data> StockDetails = new List<Data>
    {
      new Data{ Date = 10, Close = 35 },
      new Data{ Date = 20, Close= 28 },
      new Data{ Date = 30, Close = 34 },
      new Data{ Date= 40, Close = 32 },
      new Data{ Date = 50, Close = 40 },
      new Data{ Date = 60, Close = 30 },
      new Data{ Date = 70, Close = 4 },
      new Data{ Date = 80, Close = 22 },
      new Data{ Date = 90, Close = 30 },
      new Data{ Date = 100, Close =  43 },
      new Data{ Date = 110, Close =  60 },
      new Data{ Date = 120, Close =  33 },
      new Data{ Date = 130, Close =  40 },
      new Data{ Date = 140, Close =  29 },
      new Data{ Date = 150, Close =  10 },
      new Data{ Date = 160, Close =  16 },
  };
}

Numeric Range

Label Format

Numeric labels can be formatted using the LabelFormat property and it supports all globalized formats.

format.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Double" LabelFormat="n1">        
        <RangeNavigatorSeriesCollection>
            <RangeNavigatorSeries DataSource="@StockDetails" XName="Day" Type="RangeNavigatorType.StepLine" 
                                  YName="Close"></RangeNavigatorSeries>
        </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code{

    int[] Value = new int[] { 20, 50 };
    
    public class Data
    {
        public double Day;
        public double Close;
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data {  Day = 12, Close = 28 },
        new Data {  Day = 34, Close = 44 },
        new Data {  Day = 45, Close = 48 },
        new Data {  Day = 56, Close = 50 },
        new Data {  Day = 67, Close = 66 },
        new Data {  Day = 78, Close = 78 },
        new Data {  Day = 89, Close = 84 }
    };
}

Numeric Label Format

The following table describes the result of applying some commonly used label formats on numeric values.

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

Custom Label Format

The range navigator also supports custom label formats using placeholders such as {value}$, in which, the value represent the axis label, e.g. 20$.

custom-format.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Double" LabelFormat="{value}$">        
        <RangeNavigatorSeriesCollection>
            <RangeNavigatorSeries DataSource="@StockDetails" XName="Day" Type="RangeNavigatorType.StepLine" 
                                  YName="Close" Width="2">
            </RangeNavigatorSeries>
        </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code{

    int[] Value = new int[] { 20, 50 };
    
    public class Data
    {
        public double Day;
        public double Close;
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data {  Day = 12, Close = 28 },
        new Data {  Day = 34, Close = 44 },
        new Data {  Day = 45, Close = 48 },
        new Data {  Day = 56, Close = 50 },
        new Data {  Day = 67, Close = 66 },
        new Data {  Day = 78, Close = 78 },
        new Data {  Day = 89, Close = 84 }
    };
}

Custom Label Format

Logarithmic Axis

Logarithmic supports logarithmic scale, and it is used to visualize data when the Range navigator has numerical values in both lower (e.g.: 10-6) and higher (e.g.: 106) orders of magnitude.

log.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" Interval="2" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Logarithmic">
        <RangeNavigatorSeriesCollection>
            <RangeNavigatorSeries DataSource="@StockDetails" XName="Day" Type="RangeNavigatorType.StepLine" 
                                  YName="Close" Width="2"></RangeNavigatorSeries>
        </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {

    int[] Value = new int[] { 4, 6 };

    Random random = new Random();

    List<Data> StockDetails;

    protected override async Task OnInitializedAsync()
    {
        StockDetails = this.GetData();
    }

    List<Data> GetData()
    {
        List<Data> data = new List<Data>();
        for (int i = 0; i < 100; i++)
        {
            data.Add(new Data
            {
                Day = Math.Pow(10, i * 0.1),
                Close = (random.Next(5,10)*(80 - 30 + 1)) + 30,
            });
        }
        return data;
    } 
       
    public class Data
    {
        public double Day;
        public double Close;
    }
}

Logarithmic

Range

Minimum and maximum of the Range navigator will be calculated automatically based on the provided data. You can also customize the range using the Minimum, Maximum, and Interval properties.

log-range.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Interval="1" Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Logarithmic">
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Day" Type="RangeNavigatorType.StepLine" 
                              YName="Close">
        </RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

Logarithmic Range

Logarithmic Base

Logarithmic base can be customized using the LogBase property. The default value of the LogBase property is 10.

log-base.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator LogBase="2" Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Logarithmic">
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Day" Type="RangeNavigatorType.StepLine" YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

Logarithmic Base

Date-time

Range navigator supports date-time scale and displays date-time values as a labels in the specified format.

date-time.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="X" Type="RangeNavigatorType.Area" 
                              YName="Y"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code{

    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };

    public class Data
    {
        public DateTime X;
        public double Y;
    }
    
    public List<Data> StockDetails = new List<Data> {
        new Data { X = new DateTime(2005, 01, 01), Y = 21 },
        new Data { X = new DateTime(2006, 01, 01), Y = 24 },
        new Data { X = new DateTime(2007, 01, 01), Y = 36 },
        new Data { X = new DateTime(2008, 01, 01), Y = 38 },
        new Data { X = new DateTime(2009, 01, 01), Y = 54 },
        new Data { X = new DateTime(2010, 01, 01), Y = 57 },
        new Data { X = new DateTime(2011, 01, 01), Y = 70 }
    };
}

Datetime

Interval Customization

Date-time Intervals can be customized using the Interval and IntervalType properties of the range navigator. For example, when you set Interval as 2 and IntervalType as years, the interval will be considered as 2 years. Date-time supports the following Interval types:

  • Auto
  • Years
  • Quarter
  • Months
  • Weeks
  • Days
  • Hours
  • Minutes
date-time-interval.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" 
                   IntervalType="RangeIntervalType.Months" Interval="2">
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="X" Type="RangeNavigatorType.Area" YName="Y">
        </RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code{

    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };

    public class Data
    {
        public DateTime X;
        public double Y;
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data { X = new DateTime(2005, 01, 01), Y = 21 },
        new Data { X = new DateTime(2006, 01, 01), Y = 24 },
        new Data { X = new DateTime(2007, 01, 01), Y = 36 },
        new Data { X = new DateTime(2008, 01, 01), Y = 38 },
        new Data { X = new DateTime(2009, 01, 01), Y = 54 },
        new Data { X = new DateTime(2010, 01, 01), Y = 57 },
        new Data { X = new DateTime(2011, 01, 01), Y = 70 }
    };
}

Datetime Interval

Label Format

You can format and parse the date to all globalize format using LabelFormat property.

date-time-format.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator LabelFormat="y/M/d" Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="X" Type="RangeNavigatorType.Area" YName="Y">
        </RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code{

    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) };

    public class Data
    {
        public DateTime X;
        public double Y;
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data { X = new DateTime(2005, 01, 01), Y = 21 },
        new Data { X = new DateTime(2006, 01, 01), Y = 24 },
        new Data { X = new DateTime(2007, 01, 01), Y = 36 },
        new Data { X = new DateTime(2008, 01, 01), Y = 38 },
        new Data { X = new DateTime(2009, 01, 01), Y = 54 },
        new Data { X = new DateTime(2010, 01, 01), Y = 57 },
        new Data { X = new DateTime(2011, 01, 01), Y = 70 }
    };
}

Datetime Label Format

The following table describes the result of applying some common date time formats to the LabelFormat property

Label Value Label Format Property Value Result Description
new Date(2000, 03, 10) EEEE Monday The Date is displayed in day format
new Date(2000, 03, 10) yMd 04/10/2000 The Date is displayed in month/date/year format
new Date(2000, 03, 10) MMM Apr The Shorthand month for the date is displayed
new Date(2000, 03, 10) hm 12:00 AM Time of the date value is displayed as label
new Date(2000, 03, 10) hms 12:00:00 AM The Label is displayed in hours:minutes:seconds format
Previous
Next