Skip to content

Commit fef8c23

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6887 from syncfusion-content/985588-StockChartUG
985588: Updated the UG content and example changes in the Stock Chart.
2 parents f26c7b1 + 3da877e commit fef8c23

20 files changed

+1206
-951
lines changed

‎blazor/stock-chart/accessibility.md‎

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

1010
# Accessibility in Blazor Stock Chart Component
1111

12-
The Blazor Stock 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 Stock Chart component follows 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.
1313

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

@@ -30,16 +30,16 @@ The accessibility compliance for the Blazor Stock Chart component is outlined be
3030
margin: 0.5em 0;
3131
}
3232
</style>
33+
3334
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
3435

3536
<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>
3637

3738
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
3839

39-
4040
## WAI-ARIA attributes
4141

42-
The Blazor Stock 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 Stock Chart component:
42+
The Blazor Stock Chart component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Stock Chart component:
4343

4444
* img (role)
4545
* button (role)
@@ -50,27 +50,27 @@ The Blazor Stock Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/
5050

5151
## Keyboard interaction
5252

53-
The Blazor Stock 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 Stock Chart component.
53+
The Blazor Stock Chart component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, enabling effective use with assistive technologies (AT) and full keyboard navigation. The following keyboard shortcuts are supported by the Blazor Stock Chart component.
5454

5555
| Windows | Mac | Description |
5656
| --- | --- | --- |
57-
| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the Stock Chart element. |
58-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Stock Chart. |
59-
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Stock Chart. |
60-
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves the focus to the data point left side from the selected point. |
61-
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves the focus to the data point right side from the selected point. |
62-
| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend. |
63-
| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend. |
57+
| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the Stock Chart element. |
58+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the stock chart. |
59+
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the stock chart. |
60+
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the data point to the left of the selected point. |
61+
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the data point to the right of the selected point. |
62+
| <kbd>↓</kbd> or <kbd>←</kbd> | <kbd>↓</kbd> or <kbd>←</kbd> | Moves focus to the legend item to the left of the selected legend. |
63+
| <kbd>↑</kbd> or <kbd>→</kbd> | <kbd>↑</kbd> or <kbd>→</kbd> | Moves focus to the legend item to the right of the selected legend. |
6464
| <kbd>Enter/Space</kbd> | <kbd>Enter/Space</kbd> | Toggles the visibility of the corresponding series. |
65-
| <kbd>ESC</kbd> | <kbd>Esc</kbd> | Cancel the tooltip for the data point. |
66-
| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Stock Chart. |
65+
| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Cancels the tooltip for the data point. |
66+
| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the stock chart. |
6767

6868
## Ensuring accessibility
6969

70-
The Blazor Stock Chart component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
70+
The Blazor Stock Chart component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
7171

7272
The accessibility compliance of the Blazor Stock Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/stock-chart) in a new window to evaluate the accessibility of the Blazor Stock Chart component with accessibility tools.
7373

7474
## See also
7575

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

‎blazor/stock-chart/appearance.md‎

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Appearance in Blazor Stock Chart Component | Syncfusion
4-
description: Checkout and learn here all about appearance in Syncfusion Blazor Stock Chart component and much more.
4+
description: Check out and learn about configuring chart appearance in the Syncfusion Blazor Stock Chart component to refine visual presentation.
55
platform: Blazor
66
control: Stock Chart
77
documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
1111

1212
## Stock Chart Title
1313

14-
Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property, to show the information about the data plotted.
14+
Set a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property to provide context for the plotted data.
1515

1616
```cshtml
1717
@@ -28,11 +28,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
2828
</SfStockChart>
2929
3030
@code {
31-
3231
public class ChartData
3332
{
34-
public DateTime XValue {get; set;}
35-
public double YValue {get; set;}
33+
public DateTime XValue { get; set; }
34+
public double YValue { get; set; }
3635
}
3736
3837
public List<ChartData> DataSource = new List<ChartData>
@@ -43,11 +42,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
4342
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
4443
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
4544
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
46-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
45+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
4746
};
4847
}
4948
50-
5149
```
5250

5351
![Blazor Stock Chart with Title](images/appearance/blazor-stock-chart-title.png)
@@ -56,7 +54,7 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
5654

5755
## Title Customizations
5856

59-
The `TextStyle` property of chart title provides options to customize the `Size`, `Color`, `FontFamily`, `FontWeight`, `FontStyle`, `Opacity`, `TextAlignment` and `TextOverflow`.
57+
The `TextStyle` property of the chart title provides options to customize `Size`, `Color`, `FontFamily`, `FontWeight`, `FontStyle`, `Opacity`, `TextAlignment`, and `TextOverflow`.
6058

6159
```cshtml
6260
@@ -74,11 +72,10 @@ The `TextStyle` property of chart title provides options to customize the `Size`
7472
</SfStockChart>
7573
7674
@code {
77-
7875
public class ChartData
7976
{
80-
public DateTime XValue {get; set;}
81-
public double YValue {get; set;}
77+
public DateTime XValue { get; set; }
78+
public double YValue { get; set; }
8279
}
8380
8481
public List<ChartData> DataSource = new List<ChartData>
@@ -89,7 +86,7 @@ The `TextStyle` property of chart title provides options to customize the `Size`
8986
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
9087
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
9188
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
92-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
89+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
9390
};
9491
}
9592
@@ -99,9 +96,9 @@ The `TextStyle` property of chart title provides options to customize the `Size`
9996

10097
## Stock Chart Theme
10198

102-
Changing theme will affect background color, gridlines, tooltip colors and appearance.
99+
Changing the theme affects background color, gridlines, tooltip appearance, and overall styling.
103100

104-
Stock chart is shipped with several built-in themes such as `Material`, `Fabric`, `Bootstrap` , `HighContrastLight`, `MaterialDark`, `FabricDark`, `FabricDark`, `HighContrast` and `BootstrapDark`.
101+
Stock Chart includes several built-in themes such as `Material`, `Fabric`, `Bootstrap`, `HighContrastLight`, `MaterialDark`, `FabricDark`, `HighContrast`, and `BootstrapDark`.
105102

106103
```cshtml
107104
@@ -118,11 +115,10 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
118115
</SfStockChart>
119116
120117
@code {
121-
122118
public class ChartData
123119
{
124-
public DateTime XValue {get; set;}
125-
public double YValue {get; set;}
120+
public DateTime XValue { get; set; }
121+
public double YValue { get; set; }
126122
}
127123
128124
public List<ChartData> DataSource = new List<ChartData>
@@ -133,7 +129,7 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
133129
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
134130
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
135131
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
136-
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
132+
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
137133
};
138134
}
139135
@@ -143,4 +139,4 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
143139

144140
## See Also
145141

146-
* [Axis Customization](./axis-customization)
142+
* [Axis Customization](./axis-customization)

0 commit comments

Comments
 (0)