Search results

Period selector

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.EJ2.Blazor.Charts

<EjsRangeNavigator ValueType="Syncfusion.EJ2.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>
</EjsRangeNavigator>

@code {
    
    public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
    
    public class Data
    {
        public DateTime Date;
        public double Close;    
    }
    
    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.EJ2.Blazor.Charts

<EjsRangeNavigator 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>
</EjsRangeNavigator>

@code {
    
    public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
    
    public class Data
    {
        public DateTime Date;
        public double Close;    
    }
    
    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.EJ2.Blazor.Charts

<EjsRangeNavigator 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>
</EjsRangeNavigator>

@code {
    
    public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
    
    public class Data
    {
        public DateTime Date;
        public double Close;    
    }
    
    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.EJ2.Blazor.Charts

<EjsRangeNavigator DisableRangeSelector="true" ValueType="Syncfusion.EJ2.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>
</EjsRangeNavigator>

@code {
    
    public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };
    
    public class Data
    {
        public DateTime Date;
        public double Close;    
    }
    
    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 }
    };
}

See Also