Skip to content

Commit e3d0a03

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6733 from syncfusion-content/983838-ChartFeatures1
983838: Updated the UG content and example changes in the chart control.
2 parents ca19774 + 1899bf1 commit e3d0a03

File tree

8 files changed

+450
-474
lines changed

8 files changed

+450
-474
lines changed

‎blazor/chart/chart-annotations.md‎

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
11
---
22
layout: post
33
title: Annotation in Blazor Charts Component | Syncfusion
4-
description: Checkout and learn here all about using Annotation in Syncfusion Blazor Charts component and much more.
4+
description: Check out and learn how to configure and customize Annotation in Syncfusion Blazor Charts component.
55
platform: Blazor
66
control: Chart
77
documentation: ug
88
---
99

1010
# Annotation in Blazor Charts Component
1111

12-
Annotations are texts, shapes, or images that are used to highlight a specific region of interest in a chart.
12+
Annotations are texts, shapes, or images used to highlight specific regions of interest in a chart.
1313

14-
You can learn how to add annotations to Blazor Charts by watching the video below.
14+
Learn how to add Annotations to Blazor Charts by watching the video below.
1515

1616
{% youtube "youtube:https://www.youtube.com/watch?v=TpUoXrYlCkU" %}
1717

18-
The [ChartAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotations.html) property allows to add annotations to the chart. Specify the ID of the element that needs to be displayed in the chart area by using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Content) property of the annotation.
18+
The [ChartAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotations.html) allows annotations to be added to the chart. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Content) property specifies the element to display in the chart area.
1919

2020
```cshtml
2121
2222
@using Syncfusion.Blazor.Charts
2323
2424
<SfChart Title="Olympic Medals">
25-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
26-
</ChartPrimaryXAxis>
25+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
2726
2827
<ChartAnnotations>
2928
<ChartAnnotation X="@data" Y="65" CoordinateUnits="Units.Point">
@@ -39,7 +38,7 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
3938
</ChartSeriesCollection>
4039
</SfChart>
4140
42-
@code{
41+
@code {
4342
string data = "France";
4443
4544
public class ChartData
@@ -49,15 +48,15 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
4948
}
5049
5150
public List<ChartData> MedalDetails = new List<ChartData>
52-
{
53-
new ChartData{ Country= "USA", Gold=50 },
54-
new ChartData{ Country= "China", Gold=40 },
55-
new ChartData{ Country= "Japan", Gold=70 },
56-
new ChartData{ Country= "Australia", Gold=60},
57-
new ChartData{ Country= "France", Gold=50 },
58-
new ChartData{ Country= "Germany", Gold=40 },
59-
new ChartData{ Country= "Italy", Gold=40 },
60-
new ChartData{ Country= "Sweden", Gold=30 }
51+
{
52+
new ChartData { Country = "USA", Gold = 50 },
53+
new ChartData { Country = "China", Gold = 40 },
54+
new ChartData { Country = "Japan", Gold = 70 },
55+
new ChartData { Country = "Australia", Gold = 60},
56+
new ChartData { Country = "France", Gold = 50 },
57+
new ChartData { Country = "Germany", Gold = 40 },
58+
new ChartData { Country = "Italy", Gold = 40 },
59+
new ChartData { Country = "Sweden", Gold = 30 }
6160
};
6261
}
6362
@@ -67,15 +66,14 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
6766

6867
## Region
6968

70-
The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Region) property can be used to insert annotations in relation to a series or a chart. By default, it is positioned with respect to a [Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Regions.html#Syncfusion_Blazor_Charts_Regions_Chart).
69+
Use the [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Region) property to position annotations relative to a series or the chart. By default, annotations are positioned with respect to the [Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Regions.html#Syncfusion_Blazor_Charts_Regions_Chart).
7170

7271
```cshtml
7372
7473
@using Syncfusion.Blazor.Charts
7574
7675
<SfChart Title="Olympic Medals">
77-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
78-
</ChartPrimaryXAxis>
76+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
7977
8078
<ChartAnnotations>
8179
<ChartAnnotation X="@Country" Y="65" Region="Regions.Series" CoordinateUnits="Units.Point">
@@ -91,7 +89,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
9189
</ChartSeriesCollection>
9290
</SfChart>
9391
94-
@code{
92+
@code {
9593
string Country = "Australia";
9694
9795
public class ChartData
@@ -101,33 +99,32 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
10199
}
102100
103101
public List<ChartData> MedalDetails = new List<ChartData>
104-
{
105-
new ChartData{ Country= "USA", Gold=50 },
106-
new ChartData{ Country= "China", Gold=40 },
107-
new ChartData{ Country= "Japan", Gold=70 },
108-
new ChartData{ Country= "Australia", Gold=60},
109-
new ChartData{ Country= "France", Gold=50 },
110-
new ChartData{ Country= "Germany", Gold=40 },
111-
new ChartData{ Country= "Italy", Gold=40 },
112-
new ChartData{ Country= "Sweden", Gold=30 }
102+
{
103+
new ChartData { Country = "USA", Gold = 50 },
104+
new ChartData { Country = "China", Gold = 40 },
105+
new ChartData { Country = "Japan", Gold = 70 },
106+
new ChartData { Country = "Australia", Gold = 60},
107+
new ChartData { Country = "France", Gold = 50 },
108+
new ChartData { Country = "Germany", Gold = 40 },
109+
new ChartData { Country = "Italy", Gold = 40 },
110+
new ChartData { Country = "Sweden", Gold = 30 }
113111
};
114112
}
115113
116114
```
117115

118116
![Inserting Annotations using Region in Blazor Column Chart](images/annotation/blazor-column-chart-annotation-using-region.png)
119117

120-
## Co-ordinate units
118+
## Coordinate units
121119

122-
The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_CoordinateUnits) property allows to specify the annotation's coordinate units either in [Pixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Pixel) or [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Point).
120+
Set the annotation's coordinate units using the [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_CoordinateUnits) property. Choose between [Pixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Pixel) or [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Point).
123121

124122
```cshtml
125123
126124
@using Syncfusion.Blazor.Charts
127125
128126
<SfChart Title="Olympic Medals">
129-
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
130-
</ChartPrimaryXAxis>
127+
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
131128
132129
<ChartAnnotations>
133130
<ChartAnnotation X="250" Y="100" CoordinateUnits="Units.Pixel">
@@ -143,23 +140,23 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
143140
</ChartSeriesCollection>
144141
</SfChart>
145142
146-
@code{
143+
@code {
147144
public class ChartData
148145
{
149146
public string Country { get; set; }
150147
public double Gold { get; set; }
151148
}
152149
153150
public List<ChartData> MedalDetails = new List<ChartData>
154-
{
155-
new ChartData{ Country= "USA", Gold=50 },
156-
new ChartData{ Country= "China", Gold=40 },
157-
new ChartData{ Country= "Japan", Gold=70 },
158-
new ChartData{ Country= "Australia", Gold=60},
159-
new ChartData{ Country= "France", Gold=50 },
160-
new ChartData{ Country= "Germany", Gold=40 },
161-
new ChartData{ Country= "Italy", Gold=40 },
162-
new ChartData{ Country= "Sweden", Gold=30 }
151+
{
152+
new ChartData { Country = "USA", Gold = 50 },
153+
new ChartData { Country = "China", Gold = 40 },
154+
new ChartData { Country = "Japan", Gold = 70 },
155+
new ChartData { Country = "Australia", Gold = 60},
156+
new ChartData { Country = "France", Gold = 50 },
157+
new ChartData { Country = "Germany", Gold = 40 },
158+
new ChartData { Country = "Italy", Gold = 40 },
159+
new ChartData { Country = "Sweden", Gold = 30 }
163160
};
164161
}
165162
@@ -172,4 +169,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
172169
## See also
173170

174171
* [Tooltip](./tool-tip)
175-
* [Legend](./legend)
172+
* [Legend](./legend)

0 commit comments

Comments
 (0)