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
Copied to clipboard
@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 }
    };
}

Gridline customization

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
Copied to clipboard
@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 }
    };
}

Tickline customization