Skip to content

985588: Updated the UG content and example changes in the Stock Chart. #6887

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

Merged
merged 4 commits into from
Oct 17, 2025
Merged

985588: Updated the UG content and example changes in the Stock Chart. #6887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ff7b6e6
985588: Updated the UG content and example changes in the Stock Chart…
mohammednowfel4989 Oct 10, 2025
3bbe3e9
Merge branch 'development' into 985588-StockChartUG
mohammednowfel4989 Oct 13, 2025
7579785
985588: Resolved the font matter error in the PR.
mohammednowfel4989 Oct 13, 2025
3da877e
Merge branch '985588-StockChartUG' of https://github.com/syncfusion-c…
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
32 changes: 16 additions & 16 deletions blazor/stock-chart/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 Stock Chart Component | Syncfusion
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Stock Chart component and more.
description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Stock Chart component and more.
platform: Blazor
control: Stock Chart
documentation: ug
---

# Accessibility in Blazor Stock Chart Component

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

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

Expand All @@ -30,16 +30,16 @@ The accessibility compliance for the Blazor Stock Chart component is outlined be
margin: 0.5em 0;
}
</style>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>

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

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


## WAI-ARIA attributes

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:
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:

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

## Keyboard interaction

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

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

## Ensuring accessibility

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.
The Blazor Stock Chart component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.

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.

## See also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
34 changes: 15 additions & 19 deletions blazor/stock-chart/appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Appearance in Blazor Stock Chart Component | Syncfusion
description: Checkout and learn here all about appearance in Syncfusion Blazor Stock Chart component and much more.
description: Check out and learn about configuring chart appearance in the Syncfusion Blazor Stock Chart component to refine visual presentation.
platform: Blazor
control: Stock Chart
documentation: ug
Expand All @@ -11,7 +11,7 @@ documentation: ug

## Stock Chart Title

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

```cshtml

Expand All @@ -28,11 +28,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
</SfStockChart>

@code {

public class ChartData
{
public DateTime XValue {get; set;}
public double YValue {get; set;}
public DateTime XValue { get; set; }
public double YValue { get; set; }
}

public List<ChartData> DataSource = new List<ChartData>
Expand All @@ -43,11 +42,10 @@ Stock Chart can be given a title using [Title](https://help.syncfusion.com/cr/bl
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
};
}


```

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

## Title Customizations

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

```cshtml

Expand All @@ -74,11 +72,10 @@ The `TextStyle` property of chart title provides options to customize the `Size`
</SfStockChart>

@code {

public class ChartData
{
public DateTime XValue {get; set;}
public double YValue {get; set;}
public DateTime XValue { get; set; }
public double YValue { get; set; }
}

public List<ChartData> DataSource = new List<ChartData>
Expand All @@ -89,7 +86,7 @@ The `TextStyle` property of chart title provides options to customize the `Size`
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
};
}

Expand All @@ -99,9 +96,9 @@ The `TextStyle` property of chart title provides options to customize the `Size`

## Stock Chart Theme

Changing theme will affect background color, gridlines, tooltip colors and appearance.
Changing the theme affects background color, gridlines, tooltip appearance, and overall styling.

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

```cshtml

Expand All @@ -118,11 +115,10 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
</SfStockChart>

@code {

public class ChartData
{
public DateTime XValue {get; set;}
public double YValue {get; set;}
public DateTime XValue { get; set; }
public double YValue { get; set; }
}

public List<ChartData> DataSource = new List<ChartData>
Expand All @@ -133,7 +129,7 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`
new ChartData { XValue = new DateTime(2008, 01, 01), YValue = 38 },
new ChartData { XValue = new DateTime(2009, 01, 01), YValue = 54 },
new ChartData { XValue = new DateTime(2010, 01, 01), YValue = 57 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 },
new ChartData { XValue = new DateTime(2011, 01, 01), YValue = 70 }
};
}

Expand All @@ -143,4 +139,4 @@ Stock chart is shipped with several built-in themes such as `Material`, `Fabric`

## See Also

* [Axis Customization](./axis-customization)
* [Axis Customization](./axis-customization)
Loading