Search results

RTL

The range navigator provides RTL (right-to-left) support. This can be enabled using the EnableRtl property.

rtl.razor
@using Syncfusion.EJ2.Blazor.Charts

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" LabelFormat="MMM-yy" EnableRtl="true"> 
        <RangeNavigatorSeriesCollection>
            <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
        </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {
    
    DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 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,   }
    };
}

RTL