How to Select Range Using Range Selector in .NET MAUI Cartesian Chart?
In .NET MAUI, integrating the SfRangeSelector with SfCartesianChart provides a powerful way to filter and visualize data dynamically. This approach allows users to interactively select a specific range of data using the range selector thumbs, while the embedded chart automatically updates its visual appearance to highlight the selected data with different colors.
Step 1: Initialize the SfCartesianChart inside SfRangeSelector
Set up a SfRangeSelector control that contains an embedded SfCartesianChart. The Range Selector acts as a filtering mechanism for the chart. The chart is configured with NumericalAxis for both X and Y axes, with axes visibility turned off to create a clean, embedded appearance within the Range Selector.
For detailed steps on chart initialization, please refer to the documentation SfCartesianChart.
XAML
<sliders:SfRangeSelector Grid.Row="1" Grid.Column="1"
Minimum="1" Maximum="30"
RangeStart="{Binding RangeStart}"
RangeEnd="{Binding RangeEnd}"
ShowTicks="True" ShowLabels="True"
DragBehavior="Both" Interval="2">
<charts:SfCartesianChart x:Name="charts" HeightRequest="720">
<charts:SfCartesianChart.XAxes>
<charts:NumericalAxis Minimum="1" Maximum="30"
Interval="2" IsVisible="False"/>
</charts:SfCartesianChart.XAxes>
<charts:SfCartesianChart.YAxes>
<charts:NumericalAxis Maximum="30" IsVisible="False"/>
</charts:SfCartesianChart.YAxes>
<charts:SfCartesianChart.Series>
<charts:ColumnSeries ItemsSource="{Binding Items}"
XBindingPath="Day" YBindingPath="Value"
PaletteBrushes="{Binding Brushes}"/>
</charts:SfCartesianChart.Series>
</charts:SfCartesianChart>
</sliders:SfRangeSelector>
Step 2: Customize Range Selector Appearance
Customize the visual styling of the Range Selector to match your application’s theme. Apply custom colors for TrackStyle, ThumbStyle appearance, and overlay effects. The track uses different colors for active and inactive regions, while the thumbs feature white fill with colored strokes to provide clear visual feedback about the current selection.
XAML
<sliders:SfRangeSelector ActiveRegionFill="Transparent"
InactiveRegionFill="Transparent">
<sliders:SfRangeSelector.TrackStyle>
<sliders:SliderTrackStyle ActiveFill="#614570"
InactiveFill="#D6ABED"/>
</sliders:SfRangeSelector.TrackStyle>
<sliders:SfRangeSelector.ThumbStyle>
<sliders:SliderThumbStyle Fill="White" StrokeThickness="2"
Stroke="#614570"/>
</sliders:SfRangeSelector.ThumbStyle>
<sliders:SfRangeSelector.ThumbOverlayStyle>
<sliders:SliderThumbOverlayStyle Fill="#4D614570"/>
</sliders:SfRangeSelector.ThumbOverlayStyle>
</sliders:SfRangeSelector>
Step 3: Create Data Model
Define a simple data model class to represent the chart data points with Day and Value properties. This model provides the structure for binding chart data and supports the XBindingPath and YBindingPath properties in the chart series configuration.
C#
public class ChartDataModel
{
public int Day { get; set; }
public double Value { get; set; }
public ChartDataModel(int day, double value)
{
Day = day;
Value = value;
}
}
Step 4: Implement ViewModel with Dynamic Color Updates
Create a ViewModel that implements INotifyPropertyChanged and manages the data collection along with dynamic color brushes. The RangeStart and RangeEnd properties are bound to the range selector and trigger the UpdatePaletteBrushes() method whenever values change. This method iterates through the data items and assigns different colors based on whether each item falls within the selected range.
C#
public class ViewModel : INotifyPropertyChanged
{
private double rangeStart = 6;
private double rangeEnd = 16;
private ObservableCollection<Brush> brushes = new();
public ObservableCollection<ChartDataModel> Items { get; set; }
public ObservableCollection<Brush> Brushes
{
get { return brushes; }
set { brushes = value; OnPropertyChanged(nameof(Brushes)); }
}
public double RangeStart
{
get { return rangeStart; }
set
{
if (rangeStart != value)
{
rangeStart = value;
UpdatePaletteBrushes();
OnPropertyChanged(nameof(RangeStart));
}
}
}
public double RangeEnd
{
get { return rangeEnd; }
set
{
if (rangeEnd != value)
{
rangeEnd = value;
UpdatePaletteBrushes();
OnPropertyChanged(nameof(RangeEnd));
}
}
}
private void UpdatePaletteBrushes()
{
ObservableCollection<Brush> PaletteBrushes = new();
foreach (ChartDataModel item in Items)
{
if (item.Day >= rangeStart && item.Day <= rangeEnd)
{
PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb("#F69522")));
}
else
{
PaletteBrushes.Add(new SolidColorBrush(Color.FromArgb("#303B7D")));
}
}
Brushes = PaletteBrushes;
}
}
This implementation creates a seamless data filtering experience where users can drag the range selector thumbs to dynamically filter chart data.
Output
Download the complete sample from GitHub.
Conclusion
I hope you enjoyed learning how to filter chart data using .NET MAUI Range Selector. This implementation demonstrates the power of combining multiple Syncfusion® controls to create sophisticated data visualization and filtering experiences with minimal code.
You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to create and manipulate data.
For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
