The period selector allows to select a range with specified periods.
An array of objects that allows users to specify a predefined periods. The Interval
property specifies the count value of the button, and the Text
property specifies the text to be displayed on button. The IntervalType
property allows users to customize the type of the interval. The IntervalType
property supports the following interval types:
@using Syncfusion.Blazor.Charts
<SfRangeNavigator ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime">
<RangeNavigatorPeriodSelectorSettings>
<RangeNavigatorPeriods>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Months" Text="1M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Months" Text="2M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="6" IntervalType="RangeIntervalType.Months" Text="6M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="YTD"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Years" Text="1Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Years" Text="2Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="All"></RangeNavigatorPeriod>
</RangeNavigatorPeriods>
</RangeNavigatorPeriodSelectorSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
public class Data
{
public DateTime Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
};
}
The Position
property allows users to position the period selector either at the Top
or Bottom
.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime">
<RangeNavigatorPeriodSelectorSettings Position="PeriodSelectorPosition.Top">
<RangeNavigatorPeriods>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Months" Text="1M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Months" Text="2M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="6" IntervalType="RangeIntervalType.Months" Text="6M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="YTD"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Years" Text="1Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Years" Text="2Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="All"></RangeNavigatorPeriod>
</RangeNavigatorPeriods>
</RangeNavigatorPeriodSelectorSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
public class Data
{
public DateTime Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
};
}
The Height
property allows users to specify the height for period selector. The default value of the height property is 43px.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator ValueType="RangeValueType.DateTime">
<RangeNavigatorPeriodSelectorSettings Height="65">
<RangeNavigatorPeriods>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Months" Text="1M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Months" Text="2M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="6" IntervalType="RangeIntervalType.Months" Text="6M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="YTD"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Years" Text="1Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Years" Text="2Y" Selected="true"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="All"></RangeNavigatorPeriod>
</RangeNavigatorPeriods>
</RangeNavigatorPeriodSelectorSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
public class Data
{
public DateTime Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
};
}
DisableRangeSelector
property allows users to render the period selector without range navigator.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator DisableRangeSelector="true" ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime">
<RangeNavigatorPeriodSelectorSettings>
<RangeNavigatorPeriods>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Months" Text="1M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Months" Text="2M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="6" IntervalType="RangeIntervalType.Months" Text="6M"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="YTD"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="1" IntervalType="RangeIntervalType.Years" Text="1Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Interval="2" IntervalType="RangeIntervalType.Years" Text="2Y"></RangeNavigatorPeriod>
<RangeNavigatorPeriod Text="All"></RangeNavigatorPeriod>
</RangeNavigatorPeriods>
</RangeNavigatorPeriodSelectorSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
public class Data
{
public DateTime Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
};
}