The navigator can be customized using the NavigatorStyleSettings
property. The SelectedRegionColor
property is used to specify the color for selected region whereas the UnSelectedRegionColor
property is used to specify the color for unselected region.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value">
<RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
<RangeNavigatorStyleSettings UnselectedRegionColor="skyblue" SelectedRegionColor="pink"></RangeNavigatorStyleSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code{
int[] Value = new int[] { 45, 78 };
public class Data
{
public double Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = 12, Close = 28 },
new Data { Date = 34, Close = 44 },
new Data { Date = 45, Close = 48 },
new Data { Date = 56, Close = 50 },
new Data { Date = 67, Close = 66 },
new Data { Date = 78, Close = 78 },
new Data { Date = 89, Close = 84 },
};
}
The Thumb
property provides options to customize the Border, Fill, Size, and Type of thumb. The types of thumb can be Circle
and Rectangle
.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value">
<RangeNavigatorStyleSettings>
<RangeNavigatorThumbSettings Type="ThumbType.Rectangle" Fill="pink">
<RangeNavigatorThumbBorder Width="2" Color="red"></RangeNavigatorThumbBorder>
</RangeNavigatorThumbSettings>
</RangeNavigatorStyleSettings>
<RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code{
int[] Value = new int[] { 45, 78 };
public class Data
{
public double Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = 12, Close = 28 },
new Data { Date = 34, Close = 44 },
new Data { Date = 45, Close = 48 },
new Data { Date = 56, Close = 50 },
new Data { Date = 67, Close = 66 },
new Data { Date = 78, Close = 78 },
new Data { Date = 89, Close = 84 },
};
}
Using the NavigatorBorder
property, you can customize the Width
and Color
of the range navigator.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value">
<RangeNavigatorBorder Width="4" Color="Green"></RangeNavigatorBorder>
<RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code{
int[] Value = new int[] { 45, 78 };
public class Data
{
public double Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = 12, Close = 28 },
new Data { Date = 34, Close = 44 },
new Data { Date = 45, Close = 48 },
new Data { Date = 56, Close = 50 },
new Data { Date = 67, Close = 66 },
new Data { Date = 78, Close = 78 },
new Data { Date = 89, Close = 84 },
};
}
The AllowSnapping
property toggles the placement of the slider exactly to the left or on the nearest interval.
@using Syncfusion.Blazor.Charts
<SfRangeNavigator Value="@Value" AllowSnapping="true">
<RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code{
int[] Value = new int[] { 45, 78 };
public class Data
{
public double Date { get; set; }
public double Close { get; set; }
}
public List<Data> StockDetails = new List<Data>
{
new Data { Date = 12, Close = 28 },
new Data { Date = 34, Close = 44 },
new Data { Date = 45, Close = 48 },
new Data { Date = 56, Close = 50 },
new Data { Date = 67, Close = 66 },
new Data { Date = 78, Close = 78 },
new Data { Date = 89, Close = 84 },
};
}