The range navigator provides RTL (right-to-left) support. This can be enabled using the EnableRtl
property.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value" ValueType="Syncfusion.Blazor.Charts.RangeValueType.DateTime" LabelFormat="MMM-yy" EnableRtl="true">
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 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, }
};
}