Skip to content

983838: Updated the UG content and example changes in the chart control. #6733

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 7, 2025
Merged

983838: Updated the UG content and example changes in the chart control. #6733

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c1fd8a3
983838: Updated the UG content and example changes in the chart control.
mohammednowfel4989 Sep 25, 2025
0ad047f
983838: Updated content changes mentioned in the Charts UG.
mohammednowfel4989 Sep 26, 2025
a760a2b
983838: Updated content changes mentioned in the Charts UG.
mohammednowfel4989 Oct 3, 2025
737c624
982808: Resolved the font matter error in the PR.
mohammednowfel4989 Oct 3, 2025
1899bf1
Merge branch 'development' into 983838-ChartFeatures1
Gowrimathi Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 41 additions & 44 deletions blazor/chart/chart-annotations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
---
layout: post
title: Annotation in Blazor Charts Component | Syncfusion
description: Checkout and learn here all about using Annotation in Syncfusion Blazor Charts component and much more.
description: Check out and learn how to configure and customize Annotation in Syncfusion Blazor Charts component.
platform: Blazor
control: Chart
documentation: ug
---

# Annotation in Blazor Charts Component

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

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

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

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.
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.

```cshtml

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />

<ChartAnnotations>
<ChartAnnotation X="@data" Y="65" CoordinateUnits="Units.Point">
Expand All @@ -39,7 +38,7 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
</ChartSeriesCollection>
</SfChart>

@code{
@code {
string data = "France";

public class ChartData
Expand All @@ -49,15 +48,15 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
}

public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData{ Country= "USA", Gold=50 },
new ChartData{ Country= "China", Gold=40 },
new ChartData{ Country= "Japan", Gold=70 },
new ChartData{ Country= "Australia", Gold=60},
new ChartData{ Country= "France", Gold=50 },
new ChartData{ Country= "Germany", Gold=40 },
new ChartData{ Country= "Italy", Gold=40 },
new ChartData{ Country= "Sweden", Gold=30 }
{
new ChartData { Country = "USA", Gold = 50 },
new ChartData { Country = "China", Gold = 40 },
new ChartData { Country = "Japan", Gold = 70 },
new ChartData { Country = "Australia", Gold = 60},
new ChartData { Country = "France", Gold = 50 },
new ChartData { Country = "Germany", Gold = 40 },
new ChartData { Country = "Italy", Gold = 40 },
new ChartData { Country = "Sweden", Gold = 30 }
};
}

Expand All @@ -67,15 +66,14 @@ You can learn how to add annotations to Blazor Charts by watching the video belo

## Region

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).
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).

```cshtml

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />

<ChartAnnotations>
<ChartAnnotation X="@Country" Y="65" Region="Regions.Series" CoordinateUnits="Units.Point">
Expand All @@ -91,7 +89,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
</ChartSeriesCollection>
</SfChart>

@code{
@code {
string Country = "Australia";

public class ChartData
Expand All @@ -101,33 +99,32 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
}

public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData{ Country= "USA", Gold=50 },
new ChartData{ Country= "China", Gold=40 },
new ChartData{ Country= "Japan", Gold=70 },
new ChartData{ Country= "Australia", Gold=60},
new ChartData{ Country= "France", Gold=50 },
new ChartData{ Country= "Germany", Gold=40 },
new ChartData{ Country= "Italy", Gold=40 },
new ChartData{ Country= "Sweden", Gold=30 }
{
new ChartData { Country = "USA", Gold = 50 },
new ChartData { Country = "China", Gold = 40 },
new ChartData { Country = "Japan", Gold = 70 },
new ChartData { Country = "Australia", Gold = 60},
new ChartData { Country = "France", Gold = 50 },
new ChartData { Country = "Germany", Gold = 40 },
new ChartData { Country = "Italy", Gold = 40 },
new ChartData { Country = "Sweden", Gold = 30 }
};
}

```

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

## Co-ordinate units
## Coordinate units

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).
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).

```cshtml

@using Syncfusion.Blazor.Charts

<SfChart Title="Olympic Medals">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
</ChartPrimaryXAxis>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />

<ChartAnnotations>
<ChartAnnotation X="250" Y="100" CoordinateUnits="Units.Pixel">
Expand All @@ -143,23 +140,23 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
</ChartSeriesCollection>
</SfChart>

@code{
@code {
public class ChartData
{
public string Country { get; set; }
public double Gold { get; set; }
}

public List<ChartData> MedalDetails = new List<ChartData>
{
new ChartData{ Country= "USA", Gold=50 },
new ChartData{ Country= "China", Gold=40 },
new ChartData{ Country= "Japan", Gold=70 },
new ChartData{ Country= "Australia", Gold=60},
new ChartData{ Country= "France", Gold=50 },
new ChartData{ Country= "Germany", Gold=40 },
new ChartData{ Country= "Italy", Gold=40 },
new ChartData{ Country= "Sweden", Gold=30 }
{
new ChartData { Country = "USA", Gold = 50 },
new ChartData { Country = "China", Gold = 40 },
new ChartData { Country = "Japan", Gold = 70 },
new ChartData { Country = "Australia", Gold = 60},
new ChartData { Country = "France", Gold = 50 },
new ChartData { Country = "Germany", Gold = 40 },
new ChartData { Country = "Italy", Gold = 40 },
new ChartData { Country = "Sweden", Gold = 30 }
};
}

Expand All @@ -172,4 +169,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
## See also

* [Tooltip](./tool-tip)
* [Legend](./legend)
* [Legend](./legend)
Loading