Period Selector in Blazor Range Selector component

08 Apr 2021 / 1 minute to read

The period selector allows to select a range with specified periods.

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:

Auto
Years
Quarter
Months
Weeks
Days
Hours
Minutes
Seconds

periods.razor

@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 }
    };
}

Periods

Position

The Position property allows users to position the period selector either at the Top or Bottom.

position.razor

@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 }
    };
}

Positioning

Height

The Height property allows users to specify the height for period selector. The default value of the height property is 43px.

height.razor

@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 }
    };
}

Height

Visibility

DisableRangeSelector property allows users to render the period selector without range navigator.

visible.razor

@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 }
    };
}

Period Selector in Blazor Range Selector component

Periods

Position

Height

Visibility

See Also