Skip to content

985588: Updated the UG content and example changes in the Circular Gauge control. #6859

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

Open
wants to merge 2 commits into
base: development
Choose a base branch
from
Open

985588: Updated the UG content and example changes in the Circular Gauge control. #6859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d98fed2
985588: Updated the UG content and example changes in the Circular Ga…
mohammednowfel4989 Oct 9, 2025
c870236
985588: Resolved the font matter error in the PR.
mohammednowfel4989 Oct 13, 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
19 changes: 9 additions & 10 deletions blazor/circular-gauge/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Accessibility in Blazor Circular Gauge Component | Syncfusion
description: Checkout and learn here all about Accessibility in Syncfusion Blazor Circular Gauge component and more.
description: Check out and learn here all about the Accessibility support in the Syncfusion Blazor Circular Gauge component and more.
platform: Blazor
control: Circular Gauge
documentation: ug
Expand All @@ -10,7 +10,7 @@ documentation: ug

# Accessibility in Blazor Circular Gauge Component

The [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
The [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component adheres to widely used accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles).

The accessibility compliance for the Blazor Circular Gauge component is outlined below.

Expand Down Expand Up @@ -40,28 +40,27 @@ The accessibility compliance for the Blazor Circular Gauge component is outlined

## WAI-ARIA attributes

The Blazor Circular Gauge component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following `WAI-ARIA` attributes are used in the Circular Gauge component.

The Blazor Circular Gauge component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet accessibility requirements. The following WAI-ARIA attributes are used in the Circular Gauge component.

| Attributes | Purpose |
| --- | --- |
| `role=region` | It is specified in the pointer, annotation, and title. The pointer supports the interactive drag-and-drop function to update the pointer value. |
| `aria-label` | Provides an accessible name for the axis labels, title, legend item labels, text pointers and annotation. |
| `role=region` | Applied to the pointer, annotation, and title. The pointer supports interactive drag-and-drop to update its value. |
| `aria-label` | Provides accessible names for axis labels, title, legend item labels, text pointers, and annotations. |

## Screen reading in Circular Gauge

Accessibility in the Blazor Circular Gauge component ensures that all users, regardless of ability or disability, can use screen reading. The following Circular Gauge elements will be read aloud using screen reading software, such as Narrator for Windows.
Accessibility in the Blazor Circular Gauge ensures that all users, regardless of ability, can rely on screen readers. The following Circular Gauge elements are announced by screen readers such as Narrator on Windows.

| Elements | Description |
| --- | --- |
| Axis labels | Reads the axis labels of the Circular Gauge. |
| Title | Reads the title of the Circular Gauge. |
| Legend item label | Reads the label of the legend item in the Circular Gauge. |
| Text pointer | Reads the text content shown as a pointer in Circular Gauge. |
| Text pointer | Reads the text content shown as a pointer in the Circular Gauge. |
| Annotation | Reads the content specified in the annotation. |

## Ensuring accessibility

The Blazor Circular Gauge component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
Accessibility for the Blazor Circular Gauge component is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) testing library during automated testing.

The accessibility compliance of the Circular Gauge component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/circulargauge) in a new window to evaluate the accessibility of the Circular Gauge component with accessibility tools.
The accessibility compliance of the Circular Gauge component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/circulargauge) in a new window to evaluate the accessibility of the Circular Gauge component with accessibility tools.
17 changes: 8 additions & 9 deletions blazor/circular-gauge/animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
layout: post
title: Animation in Blazor Circular Gauge Component | Syncfusion
description: Checkout and learn here all about animation in the Syncfusion Blazor Circular Gauge component and much more.
description: Check out and learn how to configure and customize animation in the Syncfusion Blazor Circular Gauge component.
platform: Blazor
control: Circular Gauge
documentation: ug
---

# Animation in Blazor Circular Gauge Component

All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order.
All elements of the Circular Gauge—axis line, ticks, labels, ranges, pointers, and annotations—can be animated sequentially using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_AnimationDuration) property. Animation is enabled when `AnimationDuration` is set to a value in milliseconds, providing smooth rendering. A value of **0** (the default) disables animation. When enabled, the component animates in the following order:

1. The axis line will be animated in the rendering direction (clockwise or anticlockwise).
2. Each tick line and label will then be animated.
3. If available, ranges will be animated.
4. If available, pointers will be animated in the same way as [pointer animation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#pointer-animation).
5. If available, annotations will be animated.
1. The axis line animates in the rendering direction (clockwise or counterclockwise).
2. Each tick line and label animates.
3. If present, ranges animate.
4. If present, pointers animate in the same manner as [pointer animation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#pointer-animation).
5. If present, annotations animate.

The animation of the Circular Gauge is demonstrated in the following example.

Expand Down Expand Up @@ -67,5 +67,4 @@ The animation of the Circular Gauge is demonstrated in the following example.

![Blazor Circular Gauge Animation](./images/blazor-circulargauge-multiple-elements-animation.gif)

N> Only the pointer of the Circular Gauge can be animated individually, not the axis lines, ticks, labels, ranges, and annotations. You can refer this [link](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#pointer-animation) to enable only pointer animation.

N> Only the pointer of the Circular Gauge can be animated individually; the axis line, ticks, labels, ranges, and annotations cannot. See the [pointer animation](https://blazor.syncfusion.com/documentation/circular-gauge/pointers#pointer-animation) article to enable only pointer animation.
47 changes: 28 additions & 19 deletions blazor/circular-gauge/annotations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
---
layout: post
title: Annotations in Blazor Circular Gauge Component | Syncfusion
description: Checkout and learn here all about Annotations in Syncfusion Blazor Circular Gauge component and more.
description: Check out and learn how to configure and customize Annotations in the Syncfusion Blazor Circular Gauge component.
platform: Blazor
control: Circular Gauge
documentation: ug
---

# Annotations in Blazor Circular Gauge Component

Annotations are used to mark a specific area of interest in the Circular Gauge with texts, shapes, or images.
Annotations mark areas of interest in the circular gauge using text, shapes, or images.

## Customization

You can place any custom element on the axis area using [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_ContentTemplate) in the [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html).
Custom elements can be placed on the axis area using [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_ContentTemplate) in the [CircularGaugeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html).

```cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge Height="250px" Width="250px">
Expand All @@ -25,7 +26,7 @@ You can place any custom element on the axis area using [ContentTemplate](https:
<CircularGaugePointer Value="50"></CircularGaugePointer>
</CircularGaugePointers>
<CircularGaugeAnnotations>
<CircularGaugeAnnotation Angle="195" ZIndex="1">
<CircularGaugeAnnotation Angle="180" ZIndex="1">
<ContentTemplate>
<div class="custom-annotation">50</div>
</ContentTemplate>
Expand All @@ -34,29 +35,32 @@ You can place any custom element on the axis area using [ContentTemplate](https:
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

<style type="text/css">
.custom-annotation {
color: white;
background-color: blue;
height: 30px;
width: 30px;
border-radius: 15px;
padding: 4px 0 0 6px;
padding: 6px 0 0 6px;
font-weight: bold;
}
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVIWtZaBSTvlIPs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.png)

## Positioning the annotation

Annotations can be placed around an axis using the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_Radius) and [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_Angle) properties. For example, if the angle is 90 degrees and the radius is 110%, then the annotation will be placed at the right of the axis.
Annotations can be positioned around an axis using the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_Radius) and [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_Angle) properties. For example, with an angle of 90 degrees and a radius of 110%, the annotation appears to the right of the axis.

The radius of an annotation takes values either in pixel or in percentage. By setting value in percentage, annotation gets its position with respect to its axis radius.
Radius accepts pixel or percentage values. When set as a percentage, the annotation's position is relative to the axis radius.

```cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge Height="250px" Width="250px">
Expand All @@ -66,8 +70,8 @@ The radius of an annotation takes values either in pixel or in percentage. By se
<CircularGaugePointer Value="50"></CircularGaugePointer>
</CircularGaugePointers>
<CircularGaugeAnnotations>
<CircularGaugeAnnotation Angle="90"
Radius="110%"
<CircularGaugeAnnotation Angle="95"
Radius="125%"
ZIndex="1">
<ContentTemplate>
<div class="custom-annotation">50</div>
Expand All @@ -77,30 +81,33 @@ The radius of an annotation takes values either in pixel or in percentage. By se
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

<style type="text/css">
.custom-annotation {
color: white;
background-color: blue;
height: 30px;
width: 30px;
border-radius: 15px;
padding: 4px 0 0 6px;
padding: 6px 0 0 6px;
font-weight: bold;
}
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVyMtNaLSqmcbez?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.png)

## Multiple annotations

Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html), you can add multiple annotations to the circular gauge and each annotation content can be customized separately.
Multiple annotations can be added to the circular gauge using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html), and each annotation's content can be customized independently.

```cshtml

@using Syncfusion.Blazor.CircularGauge

<SfCircularGauge Height="250px" Width="250px">
<SfCircularGauge Height="350px" Width="400px">
<CircularGaugeAxes>
<CircularGaugeAxis>
<CircularGaugeRanges>
Expand All @@ -114,12 +121,12 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor
<CircularGaugePointer Value="50"></CircularGaugePointer>
</CircularGaugePointers>
<CircularGaugeAnnotations>
<CircularGaugeAnnotation Angle="325" Radius="150%" ZIndex="1">
<CircularGaugeAnnotation Angle="360" Radius="105%" ZIndex="1">
<ContentTemplate>
<div class="custom-annotation">Speed to get higher milage</div>
</ContentTemplate>
</CircularGaugeAnnotation>
<CircularGaugeAnnotation Angle="195" ZIndex="1">
<CircularGaugeAnnotation Angle="180" ZIndex="1">
<ContentTemplate>
<div class="speed">50</div>
</ContentTemplate>
Expand All @@ -128,14 +135,15 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>

<style type="text/css">
.speed {
color: white;
background-color: blue;
height: 30px;
width: 30px;
border-radius: 15px;
padding: 4px 0 0 6px;
padding: 6px 0 0 6px;
font-weight: bold;
}

Expand All @@ -145,11 +153,12 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor
padding: 1px;
}
</style>

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNheMtZEBomUxqXY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.png)

## See also

* [Tooltip for Annotation](user-interaction#tooltip-for-annotations)
* [Tooltip for Annotation](user-interaction#tooltip-for-annotations)
Loading