Search results

Lightweight range navigator

By default, when the DataSource for series property in RangeNavigator is empty, a light weight Range navigator will get initialized without chart. The following code example shows the basic lightweight range navigator.

light-weight.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" DataSource="@StockDetails" XName="Date" YName="Close" 
                   ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" 
                   LabelFormat="yyyy" IntervalType="RangeIntervalType.Years">
</EjsRangeNavigator>

@code {

    public DateTime[] Value = new DateTime[] { new DateTime(2007, 01, 01), new DateTime(2009, 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 }
    };
}

Selecting Range

See Also