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
.
@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 }
};
}
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.
@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 labels can be formatted using the LabelFormat
property and it supports all globalized formats.
@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 }
};
}
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 |
The range navigator also supports custom label formats using placeholders such as {value}$, in which, the value represent the axis label, e.g. 20$.
@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 }
};
}
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.
@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;
}
}
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.
@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 base can be customized using the LogBase
property. The default value of the LogBase property is 10.
@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>
Range navigator supports date-time scale and displays date-time values as a labels in the specified format.
@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 }
};
}
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:
@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 }
};
}
Label Format
You can format and parse the date to all globalize format using LabelFormat
property.
@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 }
};
}
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 |