Skip to content

Commit 4801441

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6768 from syncfusion-content/983838-AccChartUG
983838: Updated the content and example changes in the accumulation chart UG.
2 parents af56860 + 4c5be27 commit 4801441

File tree

17 files changed

+634
-606
lines changed

17 files changed

+634
-606
lines changed

‎blazor/accumulation-chart/accessibility.md‎

Lines changed: 20 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
33
title: Accessibility in Blazor Accumulation Chart Component | Syncfusion
4-
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Accumulation Chart component and more.
4+
description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Accumulation Chart component.
55
platform: Blazor
66
control: Accumulation Chart
77
documentation: ug
88
---
99

1010
# Accessibility in Blazor Accumulation Chart Component
1111

12-
The Blazor Accumulation 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.
12+
The Blazor Accumulation Chart component adheres to 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) commonly used to evaluate accessibility.
1313

14-
The accessibility compliance for the Blazor Accumulation Chart component is outlined below.
14+
Accessibility compliance for the Blazor Accumulation Chart component is outlined below.
1515

1616
| Accessibility Criteria | Compatibility |
1717
| -- | -- |
@@ -32,15 +32,12 @@ The accessibility compliance for the Blazor Accumulation Chart component is outl
3232
</style>
3333

3434
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
35-
3635
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
37-
3836
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
3937

38+
## WAI-ARIA Attributes
4039

41-
## WAI-ARIA attributes
42-
43-
The Blazor Accumulation Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Accumulation Chart component:
40+
The Blazor Accumulation Chart component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to ensure accessibility. The following ARIA attributes are used:
4441

4542
* img (role)
4643
* button (role)
@@ -49,30 +46,29 @@ The Blazor Accumulation Chart component followed the [WAI-ARIA](https://www.w3.o
4946
* aria-hidden (attribute)
5047
* aria-pressed (attribute)
5148

52-
## Keyboard interaction
49+
## Keyboard Interaction
5350

54-
The Blazor Accumulation Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Accumulation Chart component.
51+
The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making navigation easy for users of assistive technologies and those relying on keyboard navigation. The following keyboard shortcuts are supported:
5552

5653
| Windows | Mac | Description |
5754
| --- | --- | --- |
58-
| <kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the Accumulation Chart element. |
59-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Accumulation Chart. |
60-
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Accumulation Chart. |
61-
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point left side from the selected point. |
62-
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point. |
63-
| <kbd>↓</kbd> / <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend. |
64-
| <kbd>↑</kbd> / <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend. |
65-
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Toggles the visibility of the corresponding series. |
66-
| <kbd>ESC</kbd> | <kbd>Esc</kbd> | Cancel the tooltip for the data point. |
55+
| <kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the Accumulation Chart element. |
56+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the Accumulation Chart. |
57+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the Accumulation Chart. |
58+
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the data point left side from the selected point. |
59+
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the data point right side from the selected point. |
60+
| <kbd>↓</kbd> / <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves focus to the legend left side from the selected legend. |
61+
| <kbd>↑</kbd> / <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves focus to the legend right side from the selected legend. |
62+
| <kbd>Enter</kbd> / <kbd>Space</kbd> | <kbd>Enter</kbd> / <kbd>Space</kbd> | Toggles visibility of the corresponding series. |
63+
| <kbd>ESC</kbd> | <kbd>Esc</kbd> | Cancels the tooltip for the data point. |
6764
| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Accumulation Chart. |
6865

69-
## Ensuring accessibility
70-
71-
The Blazor Accumulation Chart component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
66+
## Ensuring Accessibility
7267

73-
The accessibility compliance of the Blazor Accumulation Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/accumulation-chart) in a new window to evaluate the accessibility of the Blazor Accumulation Chart component with accessibility tools.
68+
Accessibility levels are validated using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) tools during automated testing.
7469

70+
Accessibility compliance for the Blazor Accumulation Chart component can be evaluated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/accumulation-chart) in a new window to review accessibility features with accessibility tools.
7571

7672
## See also
7773

78-
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
74+
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

‎blazor/accumulation-chart/adaptive-layout.md‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
33
title: Adaptive Layout in Blazor Accumulation Chart Component | Syncfusion
4-
description: Checkout and learn here all about Adaptive Layout in Syncfusion Blazor Accumulation Chart component and more.
4+
description: Check out and learn how to configure and utilize the Adaptive Layout in Syncfusion Blazor Accumulation Chart component.
55
platform: Blazor
66
control: Accumulation Chart
77
documentation: ug
88
---
99

1010
# Adaptive Layout in Blazor Accumulation Chart Component
1111

12-
When viewing the accumulation chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion<sup style="font-size:70%">&reg;</sup> Accumulation Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, data labels, chart title, and more.
12+
When viewing the accumulation chart on mobile devices, some elements may not display properly due to limited screen space. The **Syncfusion<sup style="font-size:70%">&reg;</sup> Accumulation Chart Adaptive Layout** feature dynamically adjusts chart elements for optimal display based on screen size and orientation. Enable the `EnableAdaptiveRendering` property to allow the chart to automatically adapt to container size changes, ensuring clear alignment and visibility of elements such as the legend, data labels, chart title, and more.
1313

14-
```cshtml
14+
```cshtml
1515
1616
@using Syncfusion.Blazor.Charts
1717
@@ -44,27 +44,27 @@ When viewing the accumulation chart on a mobile device, some elements may not be
4444
new PieData { Browser = "Safari", Users = 4.73, DataLabelMappingName = "Safari: 4.73%" },
4545
new PieData { Browser = "Opera", Users = 3.12, DataLabelMappingName = "Opera: 3.12%" },
4646
new PieData { Browser = "Edge", Users = 7.48, DataLabelMappingName = "Edge: 7.48%" },
47-
new PieData { Browser = "Others", Users = 9.57, DataLabelMappingName = "Others: 9.57%" },
47+
new PieData { Browser = "Others", Users = 9.57, DataLabelMappingName = "Others: 9.57%" }
4848
};
4949
}
5050
5151
```
5252

5353
![Adaptive Layout in Blazor Accumulation Chart](images/adaptive-layout/blazor-accumulation-chart-adaptive-layout.png)
5454

55-
The table below outlines the behavior of various chart elements under specific conditions determined by the chart's height and width:
55+
The table below outlines the behavior of chart elements under specific conditions determined by chart height and width:
5656

5757
| Element | Size | Behavior |
58-
|--------------|------------------ |---------------------|
58+
|--------------|-------------------|------------------|
5959
| Title | <kbd>Height &lt; 200</kbd> / <kbd>Width &lt; 200</kbd> | Accumulation chart title is disabled |
6060
| Sutitle | <kbd>Height &lt; 300</kbd> / <kbd>Width &lt; 300</kbd> | Accumulation chart subtitle is disabled |
61-
| Datalabel | <kbd>Radius &lt; 300</kbd> / <kbd>Radius &lt; 200</kbd> | Datalabel moves inside / Datalabel is disabled |
62-
| Legend | <kbd>Height &lt; 300</kbd> / <kbd>Width &lt; 300 | Moves the bottom or top legend to the right if the width is greater than 200px; otherwise, it is disabled / Moves the right or left legend to the bottom if the height is greater than 200px; otherwise, it is disabled |
61+
| Datalabel | <kbd>Radius &lt; 300</kbd> / <kbd>Radius &lt; 200</kbd> | Data label moves inside / Datalabel is disabled |
62+
| Legend | <kbd>Height &lt; 300</kbd> / <kbd>Width &lt; 300</kbd> | Moves bottom or top legend to the right if width is greater than 200px; otherwise, disabled / Moves right or left legend to bottom if height is greater than 200px; otherwise, disabled |
6363

6464
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 Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
6565

6666
## See also
6767

68-
* [Data Label](./data-labels)
68+
* [Data label](./data-labels)
6969
* [Tooltip](./tool-tip)
70-
* [Legend](./legend)
70+
* [Legend](./legend)

‎blazor/accumulation-chart/animation.md‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
---
22
layout: post
33
title: Animation in Blazor Accumulation Chart Component | Syncfusion
4-
description: Checkout and learn here all about Animation in Syncfusion Blazor Accumulation Chart component and more.
4+
description: Check out and learn how to configure and control Animation in Syncfusion Blazor Accumulation Chart component.
55
platform: Blazor
66
control: Accumulation Chart
77
documentation: ug
88
---
99

1010
# Animation in Blazor Accumulation Chart Component
1111

12-
You can customize animation for a series using [`Animation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html) property. You can enable or disable animation of the series using [`Enable`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Enable) property. [`Duration`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Duration) specifies the duration of an animation and [`Delay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Delay) allows us to start the animation at desire time.
12+
Customize series animation using the [`Animation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html) property. Enable or disable series animation with the [`Enable`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Enable) property. The [`Duration`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Duration) property sets the animation duration, and [`Delay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Delay) specifies when the animation should start.
13+
14+
```cshtml
1315
14-
```cshtml
1516
@using Syncfusion.Blazor.Charts
1617
1718
<SfAccumulationChart Title="Mobile Browser Statistics">
@@ -26,7 +27,7 @@ You can customize animation for a series using [`Animation`](https://help.syncfu
2627
2728
</SfAccumulationChart>
2829
29-
@code{
30+
@code {
3031
public class Statistics
3132
{
3233
public string Browser;
@@ -40,16 +41,18 @@ You can customize animation for a series using [`Animation`](https://help.syncfu
4041
new Statistics { Browser = "iPhone", Users = 19 },
4142
new Statistics { Browser = "Others", Users = 4 },
4243
new Statistics { Browser = "Opera", Users = 11 },
43-
new Statistics { Browser = "Android", Users = 12 },
44+
new Statistics { Browser = "Android", Users = 12 }
4445
};
4546
}
47+
4648
```
4749

48-
## Disable animation on programmatic refresh
50+
## Disable Animation on Programmatic Refresh
4951

50-
You can programmatically refrsh chart using [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Refresh_System_Boolean_) method. You can enable or disable animation by passing boolean parameter to `Refresh` method.
52+
Refresh the chart programmatically using the [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Refresh_System_Boolean_) method. Control animation by passing a boolean parameter to the `Refresh` method.
53+
54+
```cshtml
5155
52-
```cshtml
5356
@using Syncfusion.Blazor.Charts
5457
5558
<SfAccumulationChart @ref=accumulationChart Title="Mobile Browser Statistics">
@@ -61,7 +64,7 @@ You can programmatically refrsh chart using [Refresh](https://help.syncfusion.co
6164
</SfAccumulationChart>
6265
<button @onclick="ButtonClick">Click me</button>
6366
64-
@code{
67+
@code {
6568
SfAccumulationChart accumulationChart;
6669
public class Statistics
6770
{
@@ -84,6 +87,9 @@ You can programmatically refrsh chart using [Refresh](https://help.syncfusion.co
8487
accumulationChart.Refresh(false);
8588
}
8689
}
90+
8791
```
8892

89-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAWrMgzIuHCzXH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
93+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAWrMgzIuHCzXH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
94+
95+
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 Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.

0 commit comments

Comments
 (0)