Skip to content

1047950: Reviewed and Changed UD in ChartSDK files for chart using ug frontmatter reviewer #41

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
IlamathiSF3875 wants to merge 1 commit into
base: hotfix/hotfix-v34.2.2
Choose a base branch
from
Open

1047950: Reviewed and Changed UD in ChartSDK files for chart using ug frontmatter reviewer #41

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
12 changes: 6 additions & 6 deletions chart-sdk/blazor/charts/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Accessibility in Blazor Charts Component | Syncfusion®
description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Charts component and more.
platform: chart-sdk
control: Chart
title: Blazor Charts Accessibility Compliance and Examples | Syncfusion®
description: Learn about Syncfusion Blazor Charts accessibility compliance. Review WCAG 2.2, Section 508, screen reader, and keyboard navigation support.
platform: Blazor
control: Charts
documentation: ug
---

# Accessibility in Blazor Chart Component
# Blazor Charts Accessibility Compliance

The Blazor Chart component followed the 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/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
The [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component followed the 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/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.

The accessibility compliance for the Blazor Chart component is outlined below.

Expand Down
14 changes: 7 additions & 7 deletions chart-sdk/blazor/charts/adaptive-layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Adaptive Layout in Blazor Charts Component | Syncfusion®
description: Check out and learn all the features how to configure and utilize Adaptive Layout in Blazor Charts component.
platform: chart-sdk
control: Chart
title: Blazor Charts Adaptive Layout for Mobile | Syncfusion®
description: Learn how to enable adaptive layout in Syncfusion Blazor Charts. Auto-resize chart elements for mobile and small-screen containers.
platform: Blazor
control: Charts
documentation: ug
---

# Adaptive Layout in Blazor Charts Component
# Blazor Charts Adaptive Layout

Adaptive layout in Blazor Charts ensures optimal display of chart elements on mobile devices and screens with limited space. By enabling the [EnableAdaptiveRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_EnableAdaptiveRendering) property, the chart automatically adjusts to container size changes, maintaining clear alignment and visibility for elements such as legend, axis titles, axis labels, data labels, chart title, and more.
Adaptive layout in [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) ensures optimal display of chart elements on mobile devices and screens with limited space. By enabling the [EnableAdaptiveRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_EnableAdaptiveRendering) property, the chart automatically adjusts to container size changes, maintaining clear alignment and visibility for elements such as legend, axis titles, axis labels, data labels, chart title, and more.

```cshtml

Expand Down Expand Up @@ -91,7 +91,7 @@ The table below outlines the behavior of chart elements based on chart height an
| Zoom Toolkit | <kbd>Height &lt; 200</kbd> / <kbd>Width &lt; 200</kbd> | Zoom toolkit is disabled |
| Datalabel <br> (Column and Bar Chart Types)| | Datalabel rotates based on rectangle size; hidden if it exceeds available size |

N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [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.
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

## See also

Expand Down
14 changes: 7 additions & 7 deletions chart-sdk/blazor/charts/advanced-accessibility-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Accessibility Customization in Blazor Charts Component | Syncfusion®
description: Checkout and learn here all the features about Accessibility Customization in Blazor Charts component and much more.
platform: chart-sdk
control: Chart
title: Blazor Charts Accessibility Customization | Syncfusion®
description: Learn how to configure accessibility in Syncfusion Blazor Charts. Set AccessibilityDescription, AccessibilityRole, and Focusable for screen readers.
platform: Blazor
control: Charts
documentation: ug
---

# Accessibility Customization in Blazor Chart Component
# Blazor Charts Accessibility Customization

The Blazor Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Blazor Chart component's accessibility customization are briefly explained in this section.
The [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Blazor Chart component's accessibility customization are briefly explained in this section.

The chart component has a number of characteristics that enable accessibility features to be customized, including:
* [AccessibilityDescription](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_AccessibilityDescription) - Provides a text description for the chart, improving support for screen readers.
Expand Down Expand Up @@ -319,4 +319,4 @@ The [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
```

Here is a preview sample demonstrating the accessibility customization support for all chart elements:
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhfXnWhVHFlrqSz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhRDHsreiUpbASQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
28 changes: 14 additions & 14 deletions chart-sdk/blazor/charts/axis-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Axis Customization in Blazor Charts Component | Syncfusion®
description: Checkout and learn here all the features about Axis Customization in Blazor Charts component and much more.
platform: chart-sdk
control: Chart
title: Blazor Charts Axis Customization Examples | Syncfusion®
description: Learn how to customize axes in Syncfusion Blazor Charts. Configure position, crossing, CrossesAt, and CrossesInAxis for numeric, datetime, or log axes.
platform: Blazor
control: Charts
documentation: ug
---

# Axis Customization in Blazor Charts Component
# Blazor Charts Axis Customization

This section provides a brief explanation on how to customize the Blazor Charts axis.

Expand Down Expand Up @@ -54,7 +54,7 @@ An axis can be positioned in the chart area using [CrossesAt](https://help.syncf
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrRtHWrJfXEbwFP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.webp)" %}

## Title

Expand Down Expand Up @@ -95,7 +95,7 @@ A title can be added to the axis using [Title](https://help.syncfusion.com/cr/bl
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhntRMrpTMfoZfw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %}

### Axis title alignment

Expand Down Expand Up @@ -139,7 +139,7 @@ The axis title's position can be aligned using the `TextAlignment` property in [
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhHXxMLpfskCfWE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.webp)" %}

## Tick lines

Expand Down Expand Up @@ -182,7 +182,7 @@ The width, color, and size of the minor and major tick lines can be customi
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrRNRCBJJAGlRxp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %}

## Grid lines customization

Expand Down Expand Up @@ -224,7 +224,7 @@ The width, color, and dash array of the minor and major grid lines can be c
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVHXdCVzzzhMFYW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %}

## Multiple Axis

Expand Down Expand Up @@ -269,7 +269,7 @@ The [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhntRWVppfdrHDT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %}

## See also

Expand Down Expand Up @@ -316,7 +316,7 @@ When an axis is inversed, the greatest value on the axis moves closer to the ori
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBnXHCLJpfEyWys?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %}

## Opposed position

Expand Down Expand Up @@ -357,9 +357,9 @@ To place an axis in the opposite position of its original position, set its [Opp
}

```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrRtHihJzSryWPT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %}

N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [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.
N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

## See also

Expand Down
Loading