Skip to content

1005021: Reviewed and Changed UD in ChartSDK files using ug-frontmatter #47

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
Venkatesh-kumar04 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

1005021: Reviewed and Changed UD in ChartSDK files using ug-frontmatter #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 4 additions & 4 deletions chart-sdk/blazor/circular-gauge/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Accessibility in Blazor Circular Gauge Component | Syncfusion®
description: Checkout and learn here all the features about Accessibility in Blazor Circular Gauge component and more.
platform: chart-sdk
title: Blazor Circular Gauge Accessibility | Syncfusion®
description: Learn how to make the Blazor Circular Gauge accessible with WCAG 2.2 AA, Section 508, screen reader, RTL, and color contrast support.
platform: Blazor
control: Circular Gauge
documentation: ug
---


# Accessibility in Blazor Circular Gauge Component
# Blazor Circular Gauge Accessibility

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

Expand Down
8 changes: 4 additions & 4 deletions chart-sdk/blazor/circular-gauge/animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Animation in Blazor Circular Gauge Component | Syncfusion®
description: Checkout and learn here all the features about animation in the Blazor Circular Gauge component and much more.
platform: chart-sdk
title: Blazor Circular Gauge Animation | Syncfusion®
description: Learn how to animate the Blazor Circular Gauge elements sequentially using the AnimationDuration property to render axis, ticks, labels, and pointers.
platform: Blazor
control: Circular Gauge
documentation: ug
---

# Animation in Blazor Circular Gauge Component
# Blazor Circular Gauge Animation

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.

Expand Down
22 changes: 11 additions & 11 deletions chart-sdk/blazor/circular-gauge/annotations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
layout: post
title: Annotations in Blazor Circular Gauge Component | Syncfusion®
description: Checkout and learn here all the features about Annotations in Blazor Circular Gauge component and more.
platform: chart-sdk
title: Blazor Circular Gauge Annotations | Syncfusion®
description: Learn how to mark specific areas of interest in the Blazor Circular Gauge by adding text, shapes, or images as annotations using ContentTemplate.
platform: Blazor
control: Circular Gauge
documentation: ug
---

# Annotations in Blazor Circular Gauge Component
# Blazor Circular Gauge Annotations

Annotations are used to mark a specific area of interest in the Circular Gauge with texts, 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).
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/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html).

```cshtml
@using Syncfusion.Blazor.CircularGauge
Expand All @@ -25,7 +25,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 @@ -46,7 +46,7 @@ You can place any custom element on the axis area using [ContentTemplate](https:
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBxjRhdWaPWNSlp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.webp)" %}

## Positioning the annotation

Expand All @@ -65,7 +65,7 @@ The radius of an annotation takes values either in pixel or in percentage. By se
</CircularGaugePointers>
<CircularGaugeAnnotations>
<CircularGaugeAnnotation Angle="90"
Radius="110%"
Radius="120%"
ZIndex="1">
<ContentTemplate>
<div class="custom-annotation">50</div>
Expand All @@ -87,11 +87,11 @@ The radius of an annotation takes values either in pixel or in percentage. By se
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLHDRhHVNKqVrhw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.webp)" %}

## 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.
Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html), you can add multiple annotations to the circular gauge and each annotation content can be customized separately.

```cshtml
@using Syncfusion.Blazor.CircularGauge
Expand Down Expand Up @@ -142,7 +142,7 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor
}
</style>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBHXHLdLIUFgvum?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.webp)" %}

## See also

Expand Down
30 changes: 18 additions & 12 deletions chart-sdk/blazor/circular-gauge/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Appearance in Blazor Circular Gauge Component | Syncfusion®
description: Checkout and learn here all the features about Appearance in Blazor Circular Gauge component and more.
platform: chart-sdk
title: Blazor Circular Gauge Appearance | Syncfusion®
description: Learn how to customize the Blazor Circular Gauge title, position, and background using properties like Title, CenterX, CenterY, and Background.
platform: Blazor
control: Circular Gauge
documentation: ug
---

# Appearance in Blazor Circular Gauge Component
# Blazor Circular Gauge Appearance

## Circular gauge title

Expand All @@ -27,7 +27,7 @@ You can add a title to the Circular Gauge using the [Title](https://help.syncfus
</CircularGaugeAxes>
</SfCircularGauge>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLxDHLdBYmAiGzW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %}

## Circular gauge position

Expand All @@ -42,11 +42,13 @@ You can set the mid point of the Circular Gauge in pixel as shown below.

<SfCircularGauge CenterX="20px" CenterY="20px">
<CircularGaugeAxes>
<CircularGaugeAxis StartAngle="90" EndAngle="180"></CircularGaugeAxis>
<CircularGaugeAxis StartAngle="90" EndAngle="180">
<CircularGaugePointers><CircularGaugePointer Value="0"></CircularGaugePointer></CircularGaugePointers>
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVxDdVHLVCdTrQv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.webp)" %}

### In percentage

Expand All @@ -57,15 +59,18 @@ By setting the value in percentage, Circular Gauge gets its mid point with respe

<SfCircularGauge CenterX="1%" CenterY="50%">
<CircularGaugeAxes>
<CircularGaugeAxis StartAngle="0" EndAngle="180"></CircularGaugeAxis>
<CircularGaugeAxis StartAngle="0" EndAngle="180">
<CircularGaugePointers>
<CircularGaugePointer Value="0"></CircularGaugePointer>
</CircularGaugePointers></CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLRjxVdBnxgiTKs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.webp)" %}

## Background customization

Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Background) and [CircularGaugeBorder](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeBorder.html) properties, you can change the background color and border of the Circular Gauge.
Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Background) and [CircularGaugeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeBorder.html) properties, you can change the background color and border of the Circular Gauge.

```cshtml
@using Syncfusion.Blazor.CircularGauge
Expand Down Expand Up @@ -95,7 +100,7 @@ Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
</CircularGaugeAxes>
</SfCircularGauge>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBqiLLwApIVWPGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLHZHBdVkFWzIZn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.webp)" %}

## Radius calculation based on angles

Expand All @@ -109,8 +114,9 @@ You can render semi or quarter Circular Gauge by modifying the start and end ang
<CircularGaugeAxis Radius="60%" StartAngle="270" EndAngle="90">
<CircularGaugeAxisLineStyle Width="5">
</CircularGaugeAxisLineStyle>
<CircularGaugePointers><CircularGaugePointer Value="0"></CircularGaugePointer></CircularGaugePointers>
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVHNxVnLhJYJyGw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.webp)" %}
Loading