How to Display Data Point Values in Blazor Charts?

This article explains how to display data point values when moving the mouse over the chart area using an OnCrosshairMove event in Blazor Charts.

Display Data Point Values on Mouse Move Using OnCrosshairMove Event

Blazor Charts provides an option to display data point values when moving the mouse over the chart area using an OnCrosshairMove event. This can be achieved by utilizing the OnCrosshairMove event to obtain the X and Y values of data points when the mouse is over the chart area.

In this code snippet, the OnCrosshairMove event is used to display the data point values when the mouse is over the chart area. This is achieved by defining the CrosshairMoveEvent method, which is triggered when the crosshair moves across the chart. The method extracts the X and Y values from the CrosshairMoveEventArgs and updates the text property, which is then displayed in the span element.

The ChartAxisCrosshairTooltip is enabled on both the X and Y axes to provide additional context as the crosshair moves.

Index.razor:

@using Syncfusion.Blazor.Charts

<SfChart Title="Conns, Inc Stock Details">
   <ChartEvents OnCrosshairMove="CrosshairMoveEvent"></ChartEvents>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Format="MMM">
       <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
   </ChartPrimaryXAxis>
   <ChartPrimaryYAxis Minimum="83" Maximum="87" Interval="1" Title="Million in USD"
                      LabelFormat="{value}M" RowIndex="0">
       <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
   </ChartPrimaryYAxis>
   <ChartCrosshairSettings Enable="true" LineType="LineType.Both"></ChartCrosshairSettings>
   <ChartAxes>
       <ChartAxis RowIndex="0" OpposedPosition="true" Minimum="82" Maximum="88" Interval="2" Name="yAxis" Title="Million in USD (Stock)">
           <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
           <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
       </ChartAxis>
   </ChartAxes>
   <ChartSeriesCollection>
       <ChartSeries DataSource="@ChartPoints" Type="ChartSeriesType.Line" XName="Period" YName="High">
           <ChartSeriesBorder Color="transparent"></ChartSeriesBorder>
           <ChartMarker Visible="true" Height="7" Width="7"></ChartMarker>
       </ChartSeries>
       <ChartSeries DataSource="@ChartPoints" Type="ChartSeriesType.HiloOpenClose" XName="Period" YAxisName="yAxis" High="High" Low="Low" Open="Open" Close="Close"
                    BearFillColor="#2ecd71" BullFillColor="#e74c3d">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

<span>@text</span>

@code {

   public string text { get; set; } = "";
   
   public void CrosshairMoveEvent(CrosshairMoveEventArgs args)
   {
       var data = args.AxisInfo;
       if (data.Count > 0)
       {
           text = "X : " + Convert.ToString(data[2].Value) + " Y : " + data[1].Value + " Y1 :" + data[0].Value;

       }
       StateHasChanged();
   }
   
   public List<CrosshairData> ChartPoints { get; set; } = new List<CrosshairData>
   {
       new CrosshairData { Period = new DateTime(2013,03,27), Open = 85.97, High = 86.37, Low = 85.96, Close = 86.33 },
       new CrosshairData { Period = new DateTime(2013,03,29), Open = 85.97, High = 86.37, Low = 85.96, Close = 86.33 },
       new CrosshairData { Period = new DateTime(2013,04,01), Open = 86.1, High = 86.15, Low = 85.9, Close = 86.03 },
       new CrosshairData { Period = new DateTime(2013,04,03), Open = 85.93, High = 86.17, Low = 85.84, Close = 86.02 },
       new CrosshairData { Period = new DateTime(2013,04,05), Open = 85.74, High = 86, Low = 85.66, Close = 86 },
       ...
   };
   
   public class CrosshairData
   {
       public DateTime Period { get; set; }
       public double Open { get; set; }
       public double High { get; set; }
       public double Low { get; set; }
       public double Close { get; set; }
   }
} 

The following screenshot illustrates the output of the code snippet:

Live Sample for Displaying Data Values on Mouse Hover

Conclusion:

We hope you enjoyed learning how display data point values in Blazor Charts.

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

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions 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!