Search results

Grid and Tick Lines

Grid line customization

You can customize the Width, Color, and DashArray of the major grid lines using the MajorGridLines property.

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

<EjsRangeNavigator Value="@value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Double">
    <RangeNavigatorMajorGridLines Color="Blue" Width="4" DashArray="5,5"></RangeNavigatorMajorGridLines>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.StepLine" 
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {

    int[] value = new int[] { 25, 40 };

    public class Data
    {
        public double Date;
        public double Close;
    }

    public List<Data> StockDetails = new List<Data>
    {
        new Data { Date= 10, Close= 35 },
        new Data { Date= 20, Close= 28 },
        new Data { Date= 30, Close= 34 },
        new Data { Date= 40, Close= 32 },
        new Data { Date= 50, Close= 40 }
    };
}

Grid line customization

Tick line customization

You can customize the Width, Color, and Height of the major tick lines using the MajorTickLines property.

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

<EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.Double">
    <RangeNavigatorMajorTickLines Color="Red" Width="3"></RangeNavigatorMajorTickLines>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@DataSource" XName="Date" Type="RangeNavigatorType.StepLine" 
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</EjsRangeNavigator>

@code {

    int[] value = new int[] { 25, 40 };

    public class Data
    {
        public double Date;
        public double Close;
    }
    
    public List<Data> StockDetails = new List<Data>
    {
        new Data { Date= 10, Close= 35 },
        new Data { Date= 20, Close= 28 },
        new Data { Date= 30, Close= 34 },
        new Data { Date= 40, Close= 32 },
        new Data { Date= 50, Close= 40 }
    };
}

Tick line customization