You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/chart/how-to/add-remove.md
+22-15Lines changed: 22 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
layout: post
3
3
title: Add or Remove Series in Blazor Charts Component | Syncfusion
4
-
description: Checkout and learn here all about Add or Remove Series in Syncfusion Blazor Charts component and more.
4
+
description: Learn to dynamically add or remove series in Syncfusion Blazor Charts component to update visualizations based on user input.
5
5
platform: Blazor
6
6
control: Chart
7
7
documentation: ug
@@ -11,13 +11,14 @@ documentation: ug
11
11
12
12
# Add or Remove Series in Blazor Charts Component
13
13
14
-
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.
14
+
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:
15
15
16
-
**Step 1:**
16
+
## Step 1: Render Series Dynamically
17
17
18
-
Render a series using [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html) class of the chart.
18
+
Render chart series by iterating over a collection mapped to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html).
19
19
20
20
```cshtml
21
+
21
22
<SfChart>
22
23
<ChartSeriesCollection>
23
24
@foreach (SeriesData series in SeriesCollection)
@@ -27,22 +28,26 @@ Render a series using [ChartSeriesCollection](https://help.syncfusion.com/cr/bla
27
28
}
28
29
</ChartSeriesCollection>
29
30
</SfChart>
31
+
30
32
```
31
33
32
-
**Step 2:**
34
+
## Step 2: Add and Remove Controls
33
35
34
-
Create buttons to call add and remove methods, which will add and remove a series from the chart respectively.
36
+
Create buttons to trigger methods for adding or removing series from the chart.
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).
47
+
Add a new series to the chart by appending data to the series collection.
44
48
45
49
```c#
50
+
46
51
publicvoidAddChartSeries()
47
52
{
48
53
SeriesCollection.Add(newSeriesData
@@ -52,25 +57,28 @@ public void AddChartSeries()
52
57
Data=GetChartData()
53
58
});
54
59
}
60
+
55
61
```
56
62
57
-
**Step 4:**
63
+
## Step 4: Remove Series Method
58
64
59
-
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).
65
+
Remove a series from the chart by deleting the last item in the series collection.
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.
81
+
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.
74
82
75
83
```cshtml
76
84
@@ -92,8 +100,7 @@ By clicking the **Add Chart Series** button a new series will be added to the ch
92
100
</SfChart>
93
101
</div>
94
102
95
-
@code{
96
-
103
+
@code {
97
104
List<SeriesData> SeriesCollection;
98
105
99
106
// 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
185
192
set;
186
193
}
187
194
}
188
-
189
195
}
196
+
190
197
```
191
198
192
199
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.
Copy file name to clipboardExpand all lines: blazor/chart/how-to/axis-hide.md
+15-9Lines changed: 15 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
layout: post
3
3
title: Hiding Axis in Blazor Charts Component | Syncfusion
4
-
description: Checkout and learn here all about Hiding Axis in Syncfusion Blazor Charts component and much more details.
4
+
description: Check out and learn here all about Hiding Axis in Syncfusion Blazor Charts component and much more details.
5
5
platform: Blazor
6
6
control: Chart
7
7
documentation: ug
@@ -11,13 +11,14 @@ documentation: ug
11
11
12
12
# Hiding Axis in Blazor Charts Component
13
13
14
-
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.
14
+
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.
15
15
16
-
**Step 1:**
16
+
## Step 1: Render Chart Series and Axes
17
17
18
-
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).
18
+
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.
19
19
20
20
```cshtml
21
+
21
22
<SfChart>
22
23
<ChartAxes>
23
24
<ChartAxis Name="yAxis1" />
@@ -34,25 +35,29 @@ Render a chart with three series and three axis using [ChartSeriesCollection](ht
34
35
</ChartSeriesCollection>
35
36
36
37
</SfChart>
38
+
37
39
```
38
40
39
-
**Step 2:**
41
+
## Step 2: Configure Legend Settings
40
42
41
-
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.
43
+
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.
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.
57
+
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.
54
58
55
59
```cshtml
60
+
56
61
@using Syncfusion.Blazor.Charts
57
62
58
63
<SfChart>
@@ -73,7 +78,7 @@ By clicking the legend items, one can now toggle the visibility of the associate
73
78
</SfChart>
74
79
75
80
76
-
@code{
81
+
@code{
77
82
78
83
public List<ChartData> DataPoints = new List<ChartData>
79
84
{
@@ -93,6 +98,7 @@ By clicking the legend items, one can now toggle the visibility of the associate
93
98
}
94
99
95
100
}
101
+
96
102
```
97
103
98
104
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.
Copy file name to clipboardExpand all lines: blazor/chart/how-to/dynamic-points.md
+56-44Lines changed: 56 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,39 +1,42 @@
1
1
---
2
2
layout: post
3
3
title: Dynamic Points in Blazor Charts Component | Syncfusion
4
-
description: Checkout and learn here all about the Dynamic Points in Syncfusion Blazor Charts component and much more.
4
+
description: Check out and learn how to add or remove Data Points dynamically in Syncfusion Blazor Charts component.
5
5
platform: Blazor
6
6
control: Chart
7
7
documentation: ug
8
8
---
9
9
10
10
# Dynamic Points in Blazor Charts Component
11
11
12
-
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.
12
+
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:
13
13
14
-
**Step 1**
14
+
## Step 1: Configure ChartMouseClick Event
15
15
16
-
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.
16
+
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.
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.
36
+
Retrieve the X and Y values from the event arguments and add new points to the data source.
35
37
36
38
```cshtml
39
+
...
37
40
public void MouseClick(ChartMouseEventArgs args)
38
41
{
39
42
if (args.AxisData.Count > 0)
@@ -48,62 +51,69 @@ public void MouseClick(ChartMouseEventArgs args)
48
51
}
49
52
}
50
53
}
54
+
51
55
public void AddToDataSource(object xValue, object yValue)
52
56
{
53
57
MouseClickPoints.Add(new PointData() { X = Convert.ToDouble(xValue, null), Y = Convert.ToDouble(yValue, null) });
54
58
}
55
-
```
56
59
57
-
**Step 3**
60
+
```
61
+
62
+
## Step 3: Remove Points from Data Source
58
63
59
-
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.
64
+
Determine if the clicked point exists in the data source. If present, remove it; if not, add it as a new point.
60
65
61
-
```
62
-
public void MouseClick(ChartMouseEventArgs args)
66
+
```cshtml
67
+
68
+
public void MouseClick(ChartMouseEventArgs args)
69
+
{
70
+
...
71
+
bool isSamePoint;
72
+
if (MouseClickPoints.Count >= 1)
63
73
{
64
-
...
65
-
bool isSamePoint;
66
-
if (MouseClickPoints.Count >= 1)
67
-
{
68
-
index = -1;
69
-
isSamePoint = IsSamePoint();
70
-
if (isSamePoint && MouseClickPoints.Count >= 1)
71
-
{
72
-
MouseClickPoints.RemoveAt(index);
73
-
}
74
-
else if (!isSamePoint)
75
-
{
76
-
AddToDataSource(xPoint, yPoint);
77
-
}
78
-
}
79
-
...
74
+
index = -1;
75
+
isSamePoint = IsSamePoint();
76
+
if (isSamePoint && MouseClickPoints.Count >= 1)
77
+
{
78
+
MouseClickPoints.RemoveAt(index);
79
+
}
80
+
else if (!isSamePoint)
81
+
{
82
+
AddToDataSource(xPoint, yPoint);
83
+
}
80
84
}
81
-
public bool IsSamePoint()
85
+
...
86
+
}
87
+
88
+
public bool IsSamePoint()
89
+
{
90
+
foreach (PointData item in MouseClickPoints)
82
91
{
83
-
foreach (PointData item in MouseClickPoints)
92
+
index = index + 1;
93
+
if (item.X == Convert.ToDouble(xPoint, null) &&
94
+
item.Y == Convert.ToDouble(yPoint, null))
84
95
{
85
-
index = index + 1;
86
-
if (item.X == Convert.ToDouble(xPoint, null) &&
87
-
item.Y == Convert.ToDouble(yPoint, null))
88
-
{
89
-
return true;
90
-
}
96
+
return true;
91
97
}
92
-
return false;
93
98
}
99
+
return false;
100
+
}
101
+
94
102
```
95
103
96
-
**Action**
104
+
## Action
97
105
98
-
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.
106
+
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.
0 commit comments