Search results

Grid Lines and Tick Lines in Blazor Range Selector component

Grid line customization

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

grid.razor
@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@value" ValueType="Syncfusion.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>
</SfRangeNavigator>

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

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

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

@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