How to update chart data points using selected row from grid in Blazor Charts?

This article explains how to update chart data points using the selected row from a grid in Blazor Charts.

Update Chart Data Points Using the Selected Row from a Grid

Blazor Charts provides an option to update chart data points using the selected row from a grid. This can be achieved by utilizing the RowSelected event to update the chart data points when a row is selected from the grid.

In this code snippet, the RowSelected event is utilized to update chart data points based on the selected row from a grid. When a row is selected in the Grid, the RowSelectHandler method adds the selected row’s data to the ChartDataSource which updates the Chart to display the new data. This approach ensures that the chart dynamically reflects the data chosen from the grid.

Index.razor

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Grids

<div class="row">
   <div class="col-md-6">
       <SfGrid DataSource="@GridDataSource">
           <GridEvents RowSelected="RowSelectHandler" TValue="ChartData "></GridEvents>
           <GridColumns>
               <GridColumn Field=@nameof(ChartData.XValue) HeaderText="XValue"></GridColumn>
               <GridColumn Field=@nameof(ChartData.YValue) HeaderText="YValue"></GridColumn>
           </GridColumns>
       </SfGrid>
   </div>
   <div class="col-md-6">
       <SfChart>
           <ChartPrimaryXAxis LabelFormat="MMM" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory">
           </ChartPrimaryXAxis>
           <ChartSeriesCollection>
               <ChartSeries DataSource="@ChartDataSource" XName="XValue" YName="YValue" Width=2 Type="ChartSeriesType.Line">
                   <ChartMarker Visible=true></ChartMarker>
               </ChartSeries>
           </ChartSeriesCollection>
       </SfChart>
   </div>
</div>

@code {    
   public List<ChartData> ChartDataSource = new List<ChartData>
   {
       new ChartData { XValue = new DateTime(2024, 01, 01), YValue = 21 },
       new ChartData { XValue = new DateTime(2024, 02, 01), YValue = 24 },
       new ChartData { XValue = new DateTime(2024, 03, 01), YValue = 36 },
       new ChartData { XValue = new DateTime(2024, 04, 01), YValue = 38 },
   };
   
   public void RowSelectHandler(RowSelectEventArgs<ChartData> args)
   {
       ChartDataSource.Add(args.Data);
   }
   
   public class ChartData
   {
       public DateTime XValue { get; set; }
       public double YValue { get; set; }
   }

   public List<ChartData> GridDataSource = new List<ChartData>
   {
       new ChartData { XValue = new DateTime(2024, 05, 01), YValue = 21 },
       new ChartData { XValue = new DateTime(2024, 06, 01), YValue = 24 },
       new ChartData { XValue = new DateTime(2024, 07, 01), YValue = 36 },
       new ChartData { XValue = new DateTime(2024, 08, 01), YValue = 38 },
   };
} 

The following GIF illustrates the output of the code snippet.

Live Sample for Updating Chart Data Points Using the Selected Row from a Grid

Conclusion

I hope you enjoyed learning how to update chart data points using the selected row from a grid in Blazor Charts.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

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

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