You can customize the Width, Color, and DashArray of the major grid lines using the MajorGridLines
property.
@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 { get; set; }
public double Close { get; set; }
}
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 }
};
}
You can customize the Width, Color, and Height of the major tick lines using the MajorTickLines
property.
@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 { get; set; }
public double Close { get; set; }
}
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 }
};
}