How to Fire the Mouse Move Event in Blazor StockCharts?

This article explains how to fire the mouse move event in Blazor StockCharts.

Fire the Mouse Move Event in a Stock Chart

Blazor StockCharts provides an option to fire the mouse move event in stock chart. This can be achieved by utilizing the onmousemove event on the parent container of the stock chart to fire the mouse move event.

In this code snippet, the onmousemove event is utilized on the parent container of the stock chart to fire a mouse move event. When the mouse moves over the container, the MouseMove method is triggered, which logs a message to the console. This setup enables you to detect and handle mouse movement over the stock chart area.

Index.razor

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

<div @onmousemove="MouseMove">
   <SfStockChart>
       <StockChartEvents></StockChartEvents>
       <StockChartSeriesCollection>
           <StockChartSeries DataSource="@StockDetails" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Candle" XName="Date" YName="Close" High="High" Low="Low" Open="Open" Close="Close" Volume="Volume"></StockChartSeries>
       </StockChartSeriesCollection>
   </SfStockChart>
</div>

@code {    
   public void MouseMove()
   {
       Console.WriteLine("Mousemove triggered");
   }
   
   public class StockChartData
   {
       public DateTime Date { get; set; }
       public Double Open { get; set; }
       public Double Low { get; set; }
       public Double Close { get; set; }
       public Double High { get; set; }
       public Double Volume { get; set; }
   }

   public List<StockChartData> StockDetails = new List<StockChartData>
   {
       new StockChartData { Date = new DateTime(2012, 04, 02), Open = 85.9757, High = 90.6657, Low = 85.7685, Close = 90.5257, Volume = 660187068},
       new StockChartData { Date = new DateTime(2012, 04, 09), Open = 89.4471, High = 92, Low = 86.2157, Close = 86.4614, Volume = 912634864},
       new StockChartData { Date = new DateTime(2012, 04, 16), Open = 87.1514, High = 88.6071, Low = 81.4885, Close = 81.8543, Volume = 1221746066},
       new StockChartData { Date = new DateTime(2012, 04, 23), Open = 81.5157, High = 88.2857, Low = 79.2857, Close = 86.1428, Volume = 965935749},
       new StockChartData { Date = new DateTime(2012, 04, 30), Open = 85.4, High =  85.4857, Low = 80.7385, Close = 80.75, Volume = 615249365},
       new StockChartData { Date = new DateTime(2012, 05, 07), Open = 80.2143, High = 82.2685, Low = 79.8185, Close = 80.9585, Volume = 541742692},
       new StockChartData { Date = new DateTime(2012, 05, 14), Open = 80.3671, High = 81.0728, Low = 74.5971, Close = 75.7685, Volume = 708126233},
       new StockChartData { Date = new DateTime(2012, 05, 21), Open = 76.3571, High = 82.3571, Low = 76.2928, Close = 80.3271, Volume = 682076215},
       new StockChartData { Date = new DateTime(2012, 05, 28), Open = 81.5571, High = 83.0714, Low = 80.0743, Close = 80.1414, Volume = 480059584},
   };
} 

The following GIF illustrates the output of the code snippet.

Live Sample for Firing the Mouse Move Event in a Stock Chart

Conclusion

I hope you enjoyed learning how to fire the mouse move event in Blazor StockCharts.

You can refer to our Blazor StockChart 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 StockChart 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, support portal, or feedback portal. We are always happy to assist you!