diff --git a/blazor/chart/events.md b/blazor/chart/events.md index 875a01787a..d3dc56cd6d 100644 --- a/blazor/chart/events.md +++ b/blazor/chart/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Events usage in Syncfusion Blazor Charts component and much more. +description: Learn to configure and utilize Events in Syncfusion Blazor Charts component to handle user interactions and chart lifecycle changes. platform: Blazor control: Chart documentation: ug @@ -9,57 +9,10 @@ documentation: ug # Events in Blazor Charts Component -In this section, we have provided a list of chart component events that will be triggered for appropriate chart actions. +Chart component events are triggered by corresponding chart actions. The events should be provided to the chart using [ChartEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html) component. -N> From `v18.4.*`, we have added few additional events for the chart component. - -Event Name| ------| -[OnZoomStart](events#onzoomstart)| -[OnZoomEnd](events#onzoomend)| -[OnLegendItemRender](events#onlegenditemrender)| -[OnDataLabelRender](events#ondatalabelrender)| -[OnPointRender](events#onpointrender)| -[OnAxisLabelRender](events#onaxislabelrender)| -[OnAxisLabelClick](events#onaxislabelclick)| -[OnAxisActualRangeCalculated](events#onaxisactualrangecalculated)| -[OnAxisMultiLevelLabelRender](events#onaxismultilevellabelrender)| - -N> From `v18.4.*`, some event names are different from the previous releases. The following are the event name changes from `v18.3.*` to `v18.4.*`. - -Event Name(`v18.3.*`) |Event Name(`v18.4.*`) ------|----- -Resized |[SizeChanged](events#sizechanged) -ScrollChanged |[OnScrollChanged](events#onscrollchanged) -OnScrollEnd |[OnScrollChanged](events#onscrollchanged) -OnScrollStart |[OnScrollChanged](events#onscrollchanged) -AfterExport |[OnExportComplete](events#onexportcomplete) -OnPrint | [OnPrintComplete](events#onprintcomplete) -DragStart |[OnDataEdit](events#ondataedit) -DragEnd |[OnDataEditCompleted](events#ondataeditcompleted) -LegendClick |[OnLegendClick](events#onlegendclick) -MultiLevelLabelClick |[OnMultiLevelLabelClick](events#onmultilevellabelclick) -OnSelectionComplete |[OnSelectionChanged](events#onselectionchanged) -OnDragComplete |[OnSelectionChanged](events#onselectionchanged) - -N> From `v18.4.*`, We have removed the following previous release events from chart component. - -Event Name| ------| -OnAnimationComplete| -OnChartMouseClick| -OnChartMouseDown| -OnChartMouseLeave| -OnChartMouseMove| -OnChartMouseUp| -PointMoved| -BeforeExport| -Load| -OnPointDoubleClick| -PointMoved| - ## ChartMouseMove [ChartMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseMove) event triggers when mouse moved over the chart. @@ -75,9 +28,9 @@ The following properties are available in the [ChartMouseEventArgs](https://help @using Syncfusion.Blazor.Charts - + - + @@ -87,7 +40,7 @@ The following properties are available in the [ChartMouseEventArgs](https://help -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -127,9 +80,9 @@ The following properties are available in the [ChartMouseEventArgs](https://help @using Syncfusion.Blazor.Charts - + - + @@ -139,7 +92,7 @@ The following properties are available in the [ChartMouseEventArgs](https://help -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -181,9 +134,9 @@ The following properties are available in the [ChartMouseEventArgs](https://help @using Syncfusion.Blazor.Charts - + - + @@ -193,7 +146,7 @@ The following properties are available in the [ChartMouseEventArgs](https://help -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -233,9 +186,9 @@ The following properties are available in the [ChartMouseEventArgs](https://help @using Syncfusion.Blazor.Charts - + - + @@ -245,7 +198,7 @@ The following properties are available in the [ChartMouseEventArgs](https://help -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -286,9 +239,9 @@ The following property is available in the [ZoomingEventArgs](https://help.syncf @using Syncfusion.Blazor.Charts - + - + @@ -298,7 +251,7 @@ The following property is available in the [ZoomingEventArgs](https://help.syncf -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -339,9 +292,9 @@ The following property is available in the [ZoomingEventArgs](https://help.syncf @using Syncfusion.Blazor.Charts - + - + @@ -351,7 +304,7 @@ The following property is available in the [ZoomingEventArgs](https://help.syncf -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -392,9 +345,9 @@ The following property is available in the [ZoomingEventArgs](https://help.syncf @using Syncfusion.Blazor.Charts - + - + @@ -404,7 +357,7 @@ The following property is available in the [ZoomingEventArgs](https://help.syncf -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -448,9 +401,9 @@ The following properties are available in the [LegendRenderEventArgs](https://he @using Syncfusion.Blazor.Charts - + - + @@ -460,7 +413,7 @@ The following properties are available in the [LegendRenderEventArgs](https://he -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -505,9 +458,9 @@ The following properties are available in the [TextRenderEventArgs](https://help @using Syncfusion.Blazor.Charts - + - + @@ -518,7 +471,7 @@ The following properties are available in the [TextRenderEventArgs](https://help -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -566,9 +519,9 @@ The following properties are available in the [PointRenderEventArgs](https://hel @using Syncfusion.Blazor.Charts - + - + @@ -578,7 +531,7 @@ The following properties are available in the [PointRenderEventArgs](https://hel -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -621,9 +574,9 @@ The following properties are available in the [AxisLabelRenderEventArgs](https:/ @using Syncfusion.Blazor.Charts - + - + @@ -631,7 +584,7 @@ The following properties are available in the [AxisLabelRenderEventArgs](https:/ -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -678,9 +631,9 @@ The following fields are available in the [AxisLabelClickEventArgs](https://help @using Syncfusion.Blazor.Charts - + - + @@ -688,7 +641,7 @@ The following fields are available in the [AxisLabelClickEventArgs](https://help -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -731,9 +684,9 @@ The following properties are available in the [AxisRangeCalculatedEventArgs](htt @using Syncfusion.Blazor.Charts - + - + @@ -743,7 +696,7 @@ The following properties are available in the [AxisRangeCalculatedEventArgs](htt -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -771,7 +724,7 @@ The following properties are available in the [AxisRangeCalculatedEventArgs](htt ## OnAxisMultiLevelLabelRender -[OnAxisMultiLevelLabelRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnAxisMultiLevelLabelRender) event triggers while rendering multilevellabels. +[OnAxisMultiLevelLabelRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnAxisMultiLevelLabelRender) event triggers while rendering multilevel labels. ### Arguments @@ -786,7 +739,7 @@ The following properties are available in the [AxisMultiLabelRenderEventArgs](ht @using Syncfusion.Blazor.Charts - + @@ -807,7 +760,7 @@ The following properties are available in the [AxisMultiLabelRenderEventArgs](ht -@code{ +@code { public class SalesInfo { @@ -850,9 +803,9 @@ The following fields are available in the [ResizeEventArgs](https://help.syncfus @using Syncfusion.Blazor.Charts - + - + @@ -860,7 +813,7 @@ The following fields are available in the [ResizeEventArgs](https://help.syncfus -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -909,7 +862,7 @@ The following properties are available in the [ScrollEventArgs](https://help.syn @using Syncfusion.Blazor.Charts - + @@ -921,7 +874,7 @@ The following properties are available in the [ScrollEventArgs](https://help.syn -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -963,10 +916,9 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio - + - - + @@ -974,7 +926,7 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio -@code{ +@code { SfChart chart; public class SalesInfo { @@ -997,6 +949,7 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio { chart.Export(ExportType.JPEG, "Charts"); } + public void ExportCompleteEvent(ExportEventArgs args) { // Here, you can customize your code. @@ -1025,10 +978,9 @@ The following fields are available in the [DataEditingEventArgs](https://help.sy @using Syncfusion.Blazor.Charts - + - - + @@ -1037,7 +989,7 @@ The following fields are available in the [DataEditingEventArgs](https://help.sy -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -1083,10 +1035,9 @@ The following fields are available in the [DataEditingEventArgs](https://help.sy @using Syncfusion.Blazor.Charts - + - - + @@ -1095,7 +1046,7 @@ The following fields are available in the [DataEditingEventArgs](https://help.sy -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -1136,9 +1087,9 @@ The following properties are available in the [LegendClickEventArgs](https://hel @using Syncfusion.Blazor.Charts - + - + @@ -1148,7 +1099,7 @@ The following properties are available in the [LegendClickEventArgs](https://hel -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -1176,7 +1127,7 @@ The following properties are available in the [LegendClickEventArgs](https://hel ## OnMultiLevelLabelClick -[OnMultiLevelLabelClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnMultiLevelLabelClick) event triggers after clicking on multilevellabelclick. +[OnMultiLevelLabelClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnMultiLevelLabelClick) event triggers after clicking on multilevel label. ### Arguments @@ -1194,7 +1145,7 @@ The following fields are available in the [MultiLevelLabelClickEventArgs](https: @using Syncfusion.Blazor.Charts - + @@ -1215,8 +1166,7 @@ The following fields are available in the [MultiLevelLabelClickEventArgs](https: -@code{ - +@code { public class SalesInfo { public string Month { get; set; } @@ -1257,10 +1207,9 @@ The following property is available in the [SelectionCompleteEventArgs](https:/ @using Syncfusion.Blazor.Charts - + - - + @@ -1268,8 +1217,7 @@ The following property is available in the [SelectionCompleteEventArgs](https:/ -@code{ - +@code { public class SalesInfo { public string Month { get; set; } @@ -1304,9 +1252,9 @@ The following property is available in the [SelectionCompleteEventArgs](https:/ @using Syncfusion.Blazor.Charts - + - + @@ -1314,7 +1262,7 @@ The following property is available in the [SelectionCompleteEventArgs](https:/ -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -1363,9 +1311,9 @@ The following fields are available in the [PointEventArgs](https://help.syncfusi @using Syncfusion.Blazor.Charts - + - + @@ -1373,7 +1321,7 @@ The following fields are available in the [PointEventArgs](https://help.syncfusi -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -1415,19 +1363,19 @@ The following properties are available in the [TooltipRenderEventArgs](https://h @using Syncfusion.Blazor.Charts - + - + - + -@code{ +@code { public class SalesInfo { public string Month { get; set; } @@ -1455,7 +1403,7 @@ The following properties are available in the [TooltipRenderEventArgs](https://h ## SharedTooltipRender -[SharedTooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_SharedTooltipRender) event triggers before the sharedtooltip for series is rendered. +[SharedTooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_SharedTooltipRender) event triggers before the shared tooltip for series is rendered. ### Arguments @@ -1469,9 +1417,9 @@ The following properties are available in the [SharedTooltipRenderEventArgs](htt @using Syncfusion.Blazor.Charts - + - + @@ -1480,10 +1428,10 @@ The following properties are available in the [SharedTooltipRenderEventArgs](htt - + -@code{ +@code { public class SalesInfo { public string Month { get; set; } diff --git a/blazor/chart/how-to/add-remove.md b/blazor/chart/how-to/add-remove.md index 28443537bc..8af0ccebba 100644 --- a/blazor/chart/how-to/add-remove.md +++ b/blazor/chart/how-to/add-remove.md @@ -1,7 +1,7 @@ --- layout: post title: Add or Remove Series in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Add or Remove Series in Syncfusion Blazor Charts component and more. +description: Learn to dynamically add or remove series in Syncfusion Blazor Charts component to update visualizations based on user input. platform: Blazor control: Chart documentation: ug @@ -11,13 +11,14 @@ documentation: ug # Add or Remove Series in Blazor Charts Component -The chart series can be dynamically added or removed by adding and removing a series to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). Follow the steps below to dynamically add or remove a series. +Syncfusion Blazor Charts allow dynamic addition and removal of chart series using the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). Follow these steps to update chart series at runtime: -**Step 1:** +## Step 1: Render Series Dynamically -Render a series using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) class of the chart. +Render chart series by iterating over a collection mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). ```cshtml + @foreach (SeriesData series in SeriesCollection) @@ -27,22 +28,26 @@ Render a series using [ChartSeriesCollection](https://help.syncfusion.com/cr/bla } + ``` -**Step 2:** +## Step 2: Add and Remove Controls -Create buttons to call add and remove methods, which will add and remove a series from the chart respectively. +Create buttons to trigger methods for adding or removing series from the chart. ```cshtml + Add Chart Series Remove Chart Series + ``` -**Step 3:** +## Step 3: Add Series Method -To add a new series to the chart dynamically, use the code below in the **AddChartSeries** method. This code adds a new series data to the series list named **SeriesCollection** mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). +Add a new series to the chart by appending data to the series collection. ```c# + public void AddChartSeries() { SeriesCollection.Add(new SeriesData @@ -52,13 +57,15 @@ public void AddChartSeries() Data = GetChartData() }); } + ``` -**Step 4:** +## Step 4: Remove Series Method -To remove a series from the chart dynamically, use the code below in the **RemoveChartSeries** method. This code removes a series data from the series list named **SeriesCollection** mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). +Remove a series from the chart by deleting the last item in the series collection. ```c# + public void RemoveChartSeries() { if (SeriesCollection.Count > 0) @@ -66,11 +73,12 @@ public void RemoveChartSeries() SeriesCollection.Remove(SeriesCollection[SeriesCollection.Count - 1]); } } + ``` -**Action:** +## Action -By clicking the **Add Chart Series** button a new series will be added to the chart and similarly by clicking the **Remove Chart Series** button the last series in the chart series collection will be removed from the chart. The complete code snippet for the preceding steps is available below. +Click **Add Chart Series** to insert a new series, or **Remove Chart Series** to delete the last series from the chart. The complete code sample is shown below. ```cshtml @@ -92,8 +100,7 @@ By clicking the **Add Chart Series** button a new series will be added to the ch -@code{ - +@code { List SeriesCollection; // Here, the chart series has been added by adding series data to the "SeriesCollection" list. @@ -185,8 +192,8 @@ By clicking the **Add Chart Series** button a new series will be added to the ch set; } } - } + ``` N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/how-to/axis-hide.md b/blazor/chart/how-to/axis-hide.md index 7919ae7925..00d0bcf3e0 100644 --- a/blazor/chart/how-to/axis-hide.md +++ b/blazor/chart/how-to/axis-hide.md @@ -1,7 +1,7 @@ --- layout: post title: Hiding Axis in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Hiding Axis in Syncfusion Blazor Charts component and much more details. +description: Check out and learn here all about Hiding Axis in Syncfusion Blazor Charts component and much more details. platform: Blazor control: Chart documentation: ug @@ -11,13 +11,14 @@ documentation: ug # Hiding Axis in Blazor Charts Component -The axis associated with the series can be hidden by toggling the legend item of the relevant series. Follow the steps below to hide the measure axis associated with the series. +The axis associated with a series can be hidden by toggling the legend item of the relevant series. Follow these steps to hide the measure axis associated with a series. -**Step 1:** +## Step 1: Render Chart Series and Axes -Render a chart with three series and three axis using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) and [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxes.html) properties of the chart. Map each series to a measure axis using [YAxisName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YAxisName) property of the [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html). +Render a chart with three series and three axes using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) and [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxes.html). Map each series to a measure axis using the [YAxisName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YAxisName) property. ```cshtml + @@ -34,25 +35,29 @@ Render a chart with three series and three axis using [ChartSeriesCollection](ht + ``` -**Step 2:** +## Step 2: Configure Legend Settings -In the [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html), configure the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to display the legend and the [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) property to enable legend item toggling to control the visibility of the associated series. +In [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html), set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property to display the legend and [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) to enable legend item toggling. ```cshtml + ... ... + ``` -**Action:** +## Action -By clicking the legend items, one can now toggle the visibility of the associated series. Once the series has been removed, the associated axis will be removed from the chart. If the legend item is toggled again to show the series, the associated axis with the series will be added to the chart. The complete code snippet for the preceding steps is available below. +Clicking legend items toggles the visibility of the associated series. When a series is hidden, its axis is removed from the chart. Toggling the legend item again restores the series and its axis. The following code demonstrates this behavior. ```cshtml + @using Syncfusion.Blazor.Charts @@ -73,7 +78,7 @@ By clicking the legend items, one can now toggle the visibility of the associate -@code{ +@code { public List DataPoints = new List { @@ -93,6 +98,7 @@ By clicking the legend items, one can now toggle the visibility of the associate } } + ``` N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/how-to/dynamic-points.md b/blazor/chart/how-to/dynamic-points.md index 964ade9a60..e15b6eb3f9 100644 --- a/blazor/chart/how-to/dynamic-points.md +++ b/blazor/chart/how-to/dynamic-points.md @@ -1,7 +1,7 @@ --- layout: post title: Dynamic Points in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Dynamic Points in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to add or remove Data Points dynamically in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -9,31 +9,34 @@ documentation: ug # Dynamic Points in Blazor Charts Component -We can use chart mouse/touch events to dynamically add or remove points from an existing data source by clicking within the chart area. These events allow us to obtain the location of the current cursor as X and Y values in the event arguments. The point's X and Y values can then be updated with new data from the existing data source. To achieve dynamic points, follow the steps outlined below. +Syncfusion Blazor Charts support dynamic addition and removal of points using mouse or touch events. Users can interactively update the data source by clicking within the chart area. Follow these steps to implement dynamic points: -**Step 1** +## Step 1: Configure ChartMouseClick Event -Add the [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) event to the chart and add the event handler to that. +Attach the [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) event and its handler to the chart to enable point interaction. +```cshtml -``` cshtml - -... + + ... -@code{ + +@code { public void MouseClick(ChartMouseEventArgs args) { } } + ``` -**Step 2** +## Step 2: Add Points to Data Source -Fetch the X-axis and Y-axis data of the currently clicked location from the [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) event arguments, and then add points to the data source using the `AddToDataSource` method, as shown below. +Retrieve the X and Y values from the event arguments and add new points to the data source. ```cshtml +... public void MouseClick(ChartMouseEventArgs args) { if (args.AxisData.Count > 0) @@ -48,62 +51,69 @@ public void MouseClick(ChartMouseEventArgs args) } } } + public void AddToDataSource(object xValue, object yValue) { MouseClickPoints.Add(new PointData() { X = Convert.ToDouble(xValue, null), Y = Convert.ToDouble(yValue, null) }); } -``` -**Step 3** +``` + +## Step 3: Remove Points from Data Source -To remove a point from the existing chart data source, click on it. To do so, create a method `IsSamePoint` to check whether the point obtained from [ChartMouseClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_ChartMouseClick) already exists in the data source. If the point exists in the data source, it should be removed. +Determine if the clicked point exists in the data source. If present, remove it; if not, add it as a new point. -``` - public void MouseClick(ChartMouseEventArgs args) +```cshtml + +public void MouseClick(ChartMouseEventArgs args) +{ + ... + bool isSamePoint; + if (MouseClickPoints.Count >= 1) { - ... - bool isSamePoint; - if (MouseClickPoints.Count >= 1) - { - index = -1; - isSamePoint = IsSamePoint(); - if (isSamePoint && MouseClickPoints.Count >= 1) - { - MouseClickPoints.RemoveAt(index); - } - else if (!isSamePoint) - { - AddToDataSource(xPoint, yPoint); - } - } - ... + index = -1; + isSamePoint = IsSamePoint(); + if (isSamePoint && MouseClickPoints.Count >= 1) + { + MouseClickPoints.RemoveAt(index); + } + else if (!isSamePoint) + { + AddToDataSource(xPoint, yPoint); + } } - public bool IsSamePoint() + ... +} + +public bool IsSamePoint() +{ + foreach (PointData item in MouseClickPoints) { - foreach (PointData item in MouseClickPoints) + index = index + 1; + if (item.X == Convert.ToDouble(xPoint, null) && + item.Y == Convert.ToDouble(yPoint, null)) { - index = index + 1; - if (item.X == Convert.ToDouble(xPoint, null) && - item.Y == Convert.ToDouble(yPoint, null)) - { - return true; - } + return true; } - return false; } + return false; +} + ``` -**Action** +## Action -The below code snippet illustrates a chart that allows users to add new data and update existing data source by clicking in the chart area. Additionally, clicking on an existing point will remove that data from the existing data source. +Clicking in the chart area adds new points, while clicking on an existing point removes it from the data source. The complete code sample is provided below. ``` cshtml @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts - - + + + + @@ -118,6 +128,7 @@ The below code snippet illustrates a chart that allows users to add new data and + @code { SfChart? Chart; @@ -191,6 +202,7 @@ The below code snippet illustrates a chart that allows users to add new data and new PointData { X= 90, Y= 35 } }; } + ``` ![Dynamic Points](../images/dynamic-points.gif) diff --git a/blazor/chart/how-to/lazy-loading.md b/blazor/chart/how-to/lazy-loading.md index 5da6dad547..5e2379e31c 100644 --- a/blazor/chart/how-to/lazy-loading.md +++ b/blazor/chart/how-to/lazy-loading.md @@ -1,7 +1,7 @@ --- layout: post title: Lazy Loading in Blazor Charts Component | Syncfusion -description: Checkout and Checkout and learn here all about Lazy Loading in Syncfusion Blazor Charts component and much more. +description: Check out and learn here all about Lazy Loading in Syncfusion Blazor Charts component and much more. platform: Blazor control: Chart documentation: ug @@ -9,10 +9,10 @@ documentation: ug # Lazy Loading in Blazor Charts Component -The lazy loading loads data for the chart on demand. The [OnScrollChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnScrollChanged) event will be fired by the chart, allowing us to get the minimum and maximum ranges of the axes and then upload the data to the chart. +Lazy loading enables charts to load data on demand, improving performance and responsiveness. The [OnScrollChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnScrollChanged) event is triggered by the chart, allowing retrieval of the minimum and maximum axis ranges to update the chart data accordingly. ```cshtml - + private void ScrollChange(ScrollEventArgs e) { @@ -22,7 +22,7 @@ private void ScrollChange(ScrollEventArgs e) ``` -The complete code snippet is available below. +The following code demonstrates lazy loading in Blazor Charts. ```cshtml @using Syncfusion.Blazor.Charts @@ -47,7 +47,6 @@ else } @code { - int count = 1; Random random = new Random(); public ObservableCollection < ColumnChartData > dataSource; @@ -92,17 +91,18 @@ else } } } + ``` ![LazyLoad Line](../images/lazyload-line.png) -### Line +### Line {% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpZhLxzguqSeHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![LazyLoad Column](../images/lazyload-column.png) -### Column +### Column {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrTXBLdpqQSSsSy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/chart/how-to/live-chart.md b/blazor/chart/how-to/live-chart.md index b5d2c30bcd..0aba59c665 100644 --- a/blazor/chart/how-to/live-chart.md +++ b/blazor/chart/how-to/live-chart.md @@ -1,7 +1,7 @@ --- layout: post title: Live Chart in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Live Chart in Syncfusion Blazor Charts component and much more details. +description: Learn to implement live updating charts in Syncfusion Blazor Charts using real time data binding and refresh logic. platform: Blazor control: Chart documentation: ug @@ -11,13 +11,14 @@ documentation: ug # Live Chart in Blazor Charts Component -Live update in a chart can be achieved using the timer to update the datasource with real-time data and refresh the chart. Follow the steps below to update a chart with real-time data. +Live updates in a chart can be achieved using a timer to refresh the data source with real-time values. Follow these steps to update a chart with live data. -**Step 1:** +## Step 1: Render the Chart Series Render a chart with the required series using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). ```cshtml + @@ -32,13 +33,15 @@ Render a chart with the required series using [ChartSeriesCollection](https://he + ``` -**Step 2:** +## Step 2: Format Axis Labels -Labels of the axes can be formatted based on our need using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Format) property of the [ChartAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html). Since the chart will be updated in seconds, the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Format) has been set as **mm:ss** for the [ChartPrimaryXAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartPrimaryXAxis.html) to display minutes and second in the axis labels. Similarly [ChartPrimaryYAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartPrimaryYAxis.html) labels can also be formatted as shown below using its [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Format) property. +Format axis labels using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_Format) property. For real-time updates, set the X-axis format to **mm:ss** and the Y-axis format as needed. ```cshtml + @@ -53,13 +56,15 @@ Labels of the axes can be formatted based on our need using the [LabelFormat](ht + ``` -**Step 3:** +## Step 3: Add a Timer for Live Updates -Add a timer to automatically update the chart every 500 milliseconds by calling the **AddData** function, which removes the first data from the data points collection, which is of the `ObservableCollection` type, and adds a new data to it. Since this `ObservableCollection` type is used as the data source, it is triggered whenever there is a data update within it. +Use a timer to update the chart every 500 milliseconds by calling a function that removes the first data point and adds a new one to the collection. The `ObservableCollection` type triggers updates in the chart when its data changes. ```cshtml + protected override void OnInitialized() { // Provide the chart with initial data during page load. @@ -87,9 +92,10 @@ private void AddData(Object source, ElapsedEventArgs e) CPU_Usage = randomNum.Next(30, 80) }); } + ``` -The complete code snippet for the preceding steps is available below. +The following code demonstrates how to implement a live updating chart in Blazor. ```cshtml @@ -114,8 +120,7 @@ The complete code snippet for the preceding steps is available below. -@code{ - +@code { private static Timer timer; private SfChart liveChart; private double dataLength = 100; diff --git a/blazor/chart/how-to/selected-data.md b/blazor/chart/how-to/selected-data.md index ae6c3472ff..f79fcdba3b 100644 --- a/blazor/chart/how-to/selected-data.md +++ b/blazor/chart/how-to/selected-data.md @@ -1,7 +1,7 @@ --- layout: post title: Visualize grid data in chart in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Visualize grid data in chart in Syncfusion Blazor Charts component and more. +description: Check out and learn how to visualize and synchronize selected chart data with grid in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Visualize Grid Data in Chart in Blazor Charts Component -Use the chart's [OnSelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSelectionChanged) event to get the list of selected data from the chart. +Use the chart's [OnSelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSelectionChanged) event to retrieve the list of selected data from the chart. ```cshtml @@ -31,9 +31,10 @@ public void ShowSelectedData(IDragCompleteEventArgs args) } this.StateHasChanged(); } + ``` -By using the grid's [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html?&_ga=2.74923985.277089489.1621702797-1228991885.1619258362#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, chart's selected data can be listed in the grid. +By using the grid's [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property, selected chart data can be displayed in the grid. ```cshtml @@ -46,7 +47,7 @@ By using the grid's [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusio ``` -The complete code snippet is available below. +The following code demonstrates how to visualize selected chart data in a grid. ```cshtml @@ -97,13 +98,15 @@ The complete code snippet is available below. -@code{ + +@code { public class RangeSelectionData { public double x { get; set; } public double y1 { get; set; } public double y2 { get; set; } } + public class SelectionData { public double x { get; set; } @@ -122,6 +125,7 @@ The complete code snippet is available below. dataSource.Add(new RangeSelectionData { x = 1971 + i, y1 = rnd.Next(10, 100), y2 = rnd.Next(10, 100) }); } } + public void ShowSelectedData(SelectionCompleteEventArgs Args) { object data = Args.SelectedDataValues; diff --git a/blazor/chart/how-to/synchronized-chart.md b/blazor/chart/how-to/synchronized-chart.md index c93409ef5f..30a429aeaf 100644 --- a/blazor/chart/how-to/synchronized-chart.md +++ b/blazor/chart/how-to/synchronized-chart.md @@ -1,7 +1,7 @@ --- layout: post title: Synchronized Chart in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Synchronized Chart in Syncfusion Blazor Charts component and much more details. +description: Check out and learn here all about Synchronized Chart in Syncfusion Blazor Charts component and much more details. platform: Blazor control: Chart documentation: ug @@ -11,13 +11,13 @@ documentation: ug # Synchronized Chart in Blazor Charts Component -A synchronized chart has the ability to access and interact with two or more charts at the same time. This means that actions performed on one chart, such as positioning a cursor, clicking on a specific point, or activating a tooltip, are reflected simultaneously on corresponding positions or data points across other synchronized charts based on their X-Y coordinates. +A synchronized chart enables interaction with multiple charts simultaneously. Actions performed on one chart, such as cursor movement, point selection, or tooltip activation, are reflected on corresponding positions or data points in other synchronized charts based on their X-Y coordinates. ## Tooltip synchronization -The tooltip can be synchronized across multiple charts using the `ShowTooltip` and `HideTooltip` methods. When we hover over a data point in one chart, we call the `ShowTooltip` method for the other charts to display related information in other connected charts simultaneously. +Synchronize tooltips across charts using the `ShowTooltip` and `HideTooltip` methods. Hovering over a data point in one chart triggers the `ShowTooltip` method in other charts, displaying related information simultaneously. -In the `ShowTooltip` method, specify the following parameters programmatically to enable tooltip for a particular chart: +Specify these parameters in the `ShowTooltip` method: * x - x-value of point or x-coordinate value. * y - y-value of point or y-coordinate value. @@ -77,11 +77,9 @@ In the `ShowTooltip` method, specify the following parameters programmatically t - -@code{ - +@code { public SfChart? Chart1; public SfChart? Chart2; private bool isMouseMoveUpDetected; @@ -156,14 +154,14 @@ In the `ShowTooltip` method, specify the following parameters programmatically t ## Crosshair synchronization -The crosshair can be synchronized across multiple charts using the `ShowCrosshair` and `HideCrosshair` methods. When we hover over one chart, we call the `ShowCrosshair` method for the other charts to align with data points in other connected charts, simplifying data comparison and analysis. +Synchronize crosshairs using the `ShowCrosshair` and `HideCrosshair` methods. Hovering over one chart calls the `ShowCrosshair` method in other charts, aligning data points for easier comparison and analysis. -In the `ShowCrosshair` method, specify the following parameters programmatically to enable crosshair for a particular chart: +Specify these parameters in the `ShowCrosshair` method: * x - x-coordinate value. * y - y-coordinate value. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts; @using Syncfusion.Blazor @@ -222,7 +220,6 @@ In the `ShowCrosshair` method, specify the following parameters programmatically @code { - public SfChart? Chart1; public SfChart? Chart2; private bool isMouseMoveUpDetected; @@ -301,7 +298,7 @@ In the `ShowCrosshair` method, specify the following parameters programmatically ## Zooming synchronization -You can maintain constant zoom levels across multiple charts using the [OnZoomEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnZoomEnd) event. In the [OnZoomEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnZoomEnd) event, obtain the `ZoomFactor` and `ZoomPosition` values of the particular chart, and then apply those values to the other charts. +Maintain consistent zoom levels across charts using the [OnZoomEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnZoomEnd) event. Retrieve the `ZoomFactor` and `ZoomPosition` values and apply them to other charts for synchronized zooming. ```cshtml @@ -362,7 +359,6 @@ You can maintain constant zoom levels across multiple charts using the [OnZoomEn @code { - public SfChart? _chart1; public SfChart? _chart2; public double zoomFactor = 1; diff --git a/blazor/chart/how-to/threshold.md b/blazor/chart/how-to/threshold.md index f38294cd21..4510a78ede 100644 --- a/blazor/chart/how-to/threshold.md +++ b/blazor/chart/how-to/threshold.md @@ -1,7 +1,7 @@ --- layout: post title: Threshold in Chart in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Threshold in Chart in Syncfusion Blazor Charts component and more. +description: Learn to add and customize thresholds in Syncfusion Blazor Charts to highlight critical data ranges and trigger alerts. platform: Blazor control: Chart documentation: ug @@ -11,41 +11,46 @@ documentation: ug # Threshold in Chart in Blazor Charts Component -The threshold level can be indicated in the chart using the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html). Follow the steps below to add a threshold to the chart. +The threshold level can be indicated in the chart using the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html). Follow these steps to add a threshold to the chart. -**Step 1:** +## Step 1: Render the Chart Series Render a chart with the required series using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). ```cshtml + + ``` -**Step 2:** +## Step 2: Add a Stripline to the Axis Since this threshold must be added to the measure axis, the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html) setting will be set to [ChartPrimaryYAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartPrimaryYAxis.html#properties). Using the [ChartStriplines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStriplines.html) collection property of the axis, multiple thresholds can be added to a chart. ```cshtml + ... -... +... + ``` -**Step 3:** +## Step 3: Set the Stripline Color -To represent the severity of the threshold, a color can be set to the stripline using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonStripLines.html#Syncfusion_Blazor_Charts_ChartCommonStripLines_Color) property of the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html). +Represent the severity of the threshold by setting the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonStripLines.html#Syncfusion_Blazor_Charts_ChartCommonStripLines_Color) property of the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html). ```cshtml + ... @@ -53,25 +58,29 @@ To represent the severity of the threshold, a color can be set to the stripline ... + ``` -**Step 4:** +## Step 4: Customize Stripline Order -The stripline's order, which determines whether it is rendered behind or above the series elements, can be customized by [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonStripLines.html#Syncfusion_Blazor_Charts_ChartCommonStripLines_ZIndex) property of the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html). +Control whether the stripline is rendered behind or above the series elements using the [ZIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonStripLines.html#Syncfusion_Blazor_Charts_ChartCommonStripLines_ZIndex) property. ```cshtml + ... -... +... + ``` -The complete code snippet for the preceding steps is available below. +The following code demonstrates how to add and customize a threshold in Blazor Charts. ```cshtml + @using Syncfusion.Blazor.Charts @@ -86,8 +95,7 @@ The complete code snippet for the preceding steps is available below. -@code{ - +@code { public class ChartData { public string X { get; set; } @@ -110,6 +118,7 @@ The complete code snippet for the preceding steps is available below. new ChartData{ X= "Dec", Y= 35 } }; } + ``` N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/how-to/tool-tip-table.md b/blazor/chart/how-to/tool-tip-table.md index 84874c3fa9..21e0806259 100644 --- a/blazor/chart/how-to/tool-tip-table.md +++ b/blazor/chart/how-to/tool-tip-table.md @@ -1,7 +1,7 @@ --- layout: post title: Table in Tooltip in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Table in Tooltip in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to display a table in tooltips using templates in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -9,36 +9,41 @@ documentation: ug # Table in Tooltip in Blazor Charts Component -A table type tooltip can be created using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Template) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html). Follow the steps below to display a table inside the tooltip. +A table-style tooltip can be created using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Template) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html). Follow these steps to display a table inside the tooltip. -**Step 1:** +## Step 1: Render the Chart Series Render a chart with the required series using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). ```cshtml + + ``` -**Step 2:** +## Step 2: Enable the Tooltip -The tooltip can be enabled using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property as **true** in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html). +Enable the tooltip by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Enable) property to true in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html). ```cshtml + ... - + ... + ``` -**Step 3:** +## Step 3: Add a Table Template to the Tooltip -Construct a HTML table as per the requirement and place the implicit named parameter context to access the aggregate values within the template. To retrieve aggregate values inside the template, type cast the context as [ChartTooltipInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipInfo.html). +Construct an HTML table and use the implicit named parameter context to access aggregate values within the template. Type cast the context as [ChartTooltipInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipInfo.html) to retrieve values inside the template. ```cshtml + ... ... + ``` -**Action** +## Action -When the mouse is moved over the chart series points, the tooltip is displayed in table format. The complete code snippet for the preceding steps is available below. +When the mouse is moved over chart series points, the tooltip is displayed in table format. The complete code sample is shown below. ```cshtml @@ -92,7 +98,7 @@ When the mouse is moved over the chart series points, the tooltip is displayed i -@code{ +@code { public class ChartData { public string X { get; set; }