Search results
Grid Lines and Tick Lines in Blazor Range Selector component
28 Jul 2021 / 1 minute to read
Gridline Customization
The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The Width, the Color, and the DashArray of the major gridlines can be customized by using the RangeNavigatorMajorGridLines setting.
grid.razor
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value" ValueType="RangeValueType.Double">
<RangeNavigatorMajorGridLines Color="Blue" Width="4" DashArray="5,5"></RangeNavigatorMajorGridLines>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockInfo" XName="Date" Type="RangeNavigatorType.StepLine" YName="Close">
</RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}
public int[] Value = new int[] { 25, 40 };
public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date= 10, Close= 35 },
new StockDetails { Date= 20, Close= 28 },
new StockDetails { Date= 30, Close= 34 },
new StockDetails { Date= 40, Close= 32 },
new StockDetails { Date= 50, Close= 40 }
};
}
Tickline Customization
Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The Width, the Color, and the Height of the major ticklines can be customized by using the RangeNavigatorMajorTickLines setting.
tick.razor
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value" ValueType="RangeValueType.Double">
<RangeNavigatorMajorTickLines Color="Red" Width="3"></RangeNavigatorMajorTickLines>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockInfo" XName="Date" Type="RangeNavigatorType.StepLine" YName="Close">
</RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public class StockDetails
{
public double Date { get; set; }
public double Close { get; set; }
}
public int[] Value = new int[] { 25, 40 };
public List<StockDetails> StockInfo = new List<StockDetails> {
new StockDetails { Date= 10, Close= 35 },
new StockDetails { Date= 20, Close= 28 },
new StockDetails { Date= 30, Close= 34 },
new StockDetails { Date= 40, Close= 32 },
new StockDetails { Date= 50, Close= 40 }
};
}
Thank you for your feedback and comments.We will rectify this as soon as possible!