How to update chart data points using selected row from grid in MAUI Toolkit Cartesian Charts?

In this article, we will guide you through how to update chart data points using a selected row from the grid in a .NET MAUI Toolkit Cartesian Charts. Using SfDataGrid and SfCartesianChart, we will build an interactive and dynamic data visualization interface. The key feature enabling this interaction is the CellTapped event of the SfDataGrid. By leveraging this event, we can detect user selection and update the chart data in real time.

Let’s walk through the step-by-step process to achieve this behavior.

Step 1: Define the Data Model

We begin by creating a simple model that will represent the data structure used in both the chart and the grid.

public class ChartData
{
   public DateTime XValue { get; set; }
   public double YValue { get; set; }
} 

Step 2: Set Up the ViewModel

The ViewModel class manages both the chart and grid data sources. Initially, the chart has a set of default data points, and the grid contains additional data points that the user can add to the chart by tapping.

public class MainViewModel : INotifyPropertyChanged
{
   private ObservableCollection<ChartData> _chartDataSource;
   private ObservableCollection<ChartData> _gridDataSource;

   public ObservableCollection<ChartData> ChartDataSource
   {
       get => _chartDataSource;
       set
       {
           _chartDataSource = value;
           OnPropertyChanged();
       }
   }

   public ObservableCollection<ChartData> GridDataSource
   {
       get => _gridDataSource;
       set
       {
           _gridDataSource = value;
           OnPropertyChanged();
       }
   }

   public MainViewModel()
   {
       // Initialize chart data.
       ChartDataSource = new ObservableCollection<ChartData>
       {
           new ChartData { XValue = new DateTime(2024, 01, 01), YValue = 21 },
           new ChartData { XValue = new DateTime(2024, 01, 02), YValue = 24 },
           new ChartData { XValue = new DateTime(2024, 01, 03), YValue = 36 },
           new ChartData { XValue = new DateTime(2024, 01, 04), YValue = 38 }
       };

       // Initialize data grid data.
       GridDataSource = new ObservableCollection<ChartData>
       {
           new ChartData { XValue = new DateTime(2024, 01, 05), YValue = 21 },
           new ChartData { XValue = new DateTime(2024, 01, 06), YValue = 24 },
           new ChartData { XValue = new DateTime(2024, 01, 07), YValue = 36 },
           new ChartData { XValue = new DateTime(2024, 01, 08), YValue = 38 }
       };
   }

   // Method to add data to chart data source
   public void AddToChartDataSource(ChartData data)
   {

     bool exists = ChartDataSource.Any(item =>
            item.XValue.Date == data.XValue.Date && ((float)item.YValue) == ((float)data.YValue));

     if (!exists)
      {
       // Add the new data point.
       ChartDataSource.Add(data);
      
      }
   }
   public event PropertyChangedEventHandler PropertyChanged;

   protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
   {
       PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
   }
}

Step 3: Design the XAML Layout

In your XAML file, arrange a layout with the SfDataGrid on the left and the SfCartesianChart on the right.

The important part here is setting the CellTapped event for the data grid.

<Grid ColumnSpacing="10" Padding="10">
   <Grid.ColumnDefinitions>
       <ColumnDefinition Width="*" />
       <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>

   <!-- DataGrid on the left -->
   <sfgrid:SfDataGrid x:Name="dataGrid"
                     Grid.Column="0"
                      VerticalOptions="Fill"
                     HorizontalOptions="Fill"
                     ItemsSource="{Binding GridDataSource}"
                     AutoGenerateColumnsMode="None"
                     SelectionMode="Single"
                     CellTapped="DataGrid_CellTapped"
                     >
       <sfgrid:SfDataGrid.Columns>
           <sfgrid:DataGridTextColumn Width="150" HeaderText="Date" MappingName="XValue" Format="MMM dd, yyyy" />
           <sfgrid:DataGridNumericColumn Width="150" HeaderText="Value" MappingName="YValue" />
       </sfgrid:SfDataGrid.Columns>
   </sfgrid:SfDataGrid>

   <!-- Chart on the right -->
   <chart:SfCartesianChart x:Name="chart" Grid.Column="1">
       <chart:SfCartesianChart.XAxes>
           <chart:DateTimeAxis  />
       </chart:SfCartesianChart.XAxes>
       <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis  />
       </chart:SfCartesianChart.YAxes>
       <chart:SfCartesianChart.Series>
           <chart:LineSeries ItemsSource="{Binding ChartDataSource}"
                            XBindingPath="XValue"
                            YBindingPath="YValue"
                            StrokeWidth="2">
           </chart:LineSeries>
       </chart:SfCartesianChart.Series>
      
   </chart:SfCartesianChart>
</Grid> 

Step 4: Handle CellTapped Event in Code-Behind

In your code-behind, the CellTapped event of SfDataGrid is where the selected data is transferred to the chart.

private void DataGrid_CellTapped(object sender, DataGridCellTappedEventArgs e)
{
   if (e.RowColumnIndex.RowIndex >= 0 && e.RowData is ChartData selectedData)
   {
       var viewModel = (MainViewModel)BindingContext;

       var dataPoint = new ChartData
       {
           XValue = selectedData.XValue,
           YValue = selectedData.YValue
       };

       viewModel.AddToChartDataSource(dataPoint);
   }
}

How It Works

Setup: The application starts with predefined chart data and additional data in the grid.
User Interaction: When a user taps on a cell in the grid, the DataGrid_CellTapped event fires
Data Update: The tapped row’s data is passed to the ViewModel and added to the SfCartesianChart if it’s not already present.

Output:

Download the complete sample from GitHub.

Conclusion

I hope you enjoyed learning how to to update chart data points using selected row from grid in MAUI Toolkit Cartesian Charts.

You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our.NET MAUI Toolkit Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!