Search results

Lightweight in Blazor Range Selector component

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

<SfRangeNavigator Value="@Value" ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime"
                   LabelFormat="y/M/d" LabelIntersectAction="RangeLabelIntersectAction.Hide">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@DataSource" XName="X" Type="RangeNavigatorType.StepLine"
                              YName="Y" Width="2"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>

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

    public List<Data> DataSource = new List<Data> {
        new Data { X = new DateTime(2005, 01, 01), Y = 21, Y1 = 28 },
        new Data { X = new DateTime(2006, 01, 01), Y = 24, Y1 = 44 },
        new Data { X = new DateTime(2007, 01, 01), Y = 36, Y1 = 48 },
        new Data { X = new DateTime(2008, 01, 01), Y = 38, Y1 = 50 },
        new Data { X = new DateTime(2009, 01, 01), Y = 54, Y1 = 66 },
        new Data { X = new DateTime(2010, 01, 01), Y = 57, Y1 = 78 },
        new Data { X = new DateTime(2011, 01, 01), Y = 70, Y1 = 84 }
    };
}

Selecting Range

See Also