Skip to content

documentation(101780): Improved react chart UG against AI #67

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
smukilansf3478 wants to merge 3 commits into
base: development
Choose a base branch
from
Open

documentation(101780): Improved react chart UG against AI #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a50f06
101780: Improved react chart UG against AI
smukilansf3478 Aug 19, 2026
b8b7c98
101780:Update samples
smukilansf3478 Aug 20, 2026
1c789a1
101780:Update samples
smukilansf3478 Aug 20, 2026
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
26 changes: 16 additions & 10 deletions chart-sdk/react/charts/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,16 @@ The Chart component's accessibility compliance is outlined below.

## WAI-ARIA attributes

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

**Roles:**

* img (role)
* button (role)
* region (role)

**Attributes:**

* aria-label (attribute)
* aria-hidden (attribute)
* aria-pressed (attribute)
Expand All @@ -58,15 +63,15 @@ The Chart component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>Alt + J</kbd> | Moves the focus to the chart element. |
| <kbd>Tab</kbd> | Moves the focus to the next element in the chart. |
| <kbd>Shift + Tab</kbd> | Moves the focus to the previous element in the chart. |
| <kbd>Down Arrow</kbd> | Moves the focus to the data point left side from the selected point. |
| <kbd>Up Arrow</kbd> | Moves the focus to the data point right side from the selected point. |
| <kbd>Left Arrow</kbd> | Moves the focus to the next series in the chart. |
| <kbd>Right Arrow</kbd> | Moves the focus to the previous series in the chart. |
| <kbd>ESC</kbd> | Cancel the tooltip for the data point. |
| <kbd>Down Arrow</kbd> | Moves the focus to the next data point from the selected point. |
| <kbd>Up Arrow</kbd> | Moves the focus to the previous data point from the selected point. |
| <kbd>Left Arrow</kbd> | Moves the focus to the previous series in the chart. |
| <kbd>Right Arrow</kbd> | Moves the focus to the next series in the chart. |
| <kbd>ESC</kbd> | Cancels the tooltip for the data point. |
| <kbd>Enter/Space</kbd> | Selects the data point in the series. |
| <kbd>Down/Left Arrow</kbd> | Moves the focus to the legend left side from the selected legend. |
| <kbd>Up/Right Arrow</kbd> | Moves the focus to the legend right side from the selected legend. |
| <kbd>Enter/Space</kbd> | Toggles the visibility of the corresponding series. |
| <kbd>Down/Left Arrow</kbd> | When a legend item is focused, moves the focus to the previous legend item. |
| <kbd>Up/Right Arrow</kbd> | When a legend item is focused, moves the focus to the next legend item. |
| <kbd>Enter/Space</kbd> | When a legend item is focused, toggles the visibility of the corresponding series. |
| <kbd>Ctrl + +</kbd> | Zoom in the chart. |
| <kbd>Ctrl + -</kbd> | Zoom out the chart. |
| <kbd>Down/Up Arrow</kbd> | Pan the chart vertically. |
Expand All @@ -84,4 +89,5 @@ The accessibility compliance of the Chart component is shown in the following sa

## See also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> React components](https://ej2.syncfusion.com/react/documentation/common/accessibility)
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> React components](../common/accessibility)
* [Accessibility customization in React Chart component](./advanced-accessibility-configuration)
25 changes: 16 additions & 9 deletions chart-sdk/react/charts/advanced-accessibility-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ domainurl: https://help.syncfusion.com/chart-sdk

# Accessibility customization in React Chart component

The [React Charts](https://www.syncfusion.com/react-components/react-charts) component visualizes data graphically and provides accessibility customization options to improve usability for people with disabilities. The primary accessibility attributes are described in this section.
The [React Charts](https://www.syncfusion.com/react-components/react-charts) component visualizes data graphically and provides accessibility customization options to improve usability for people with disabilities. This section describes the primary accessibility attributes.

The chart component exposes attributes that enable accessibility customization, including:
> Before customizing accessibility attributes, ensure that the Chart component's accessibility is enabled (it is enabled by default). For more details, see [Accessibility in React Chart component](./accessibility).

The Chart component exposes attributes that enable accessibility customization, including:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the chart, improving support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the chart, helping screen readers to identify the element appropriately.
Expand Down Expand Up @@ -68,7 +70,7 @@ The [`series`](https://ej2.syncfusion.com/react/documentation/api/chart#series)

## Title and subtitle

In the React chart control, the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#accessibility) properties in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) can be customized for accessibility:
In the React Chart component, the [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/titleSettingsModel#accessibility) properties in [`titleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#titlestyle) and [`subTitleStyle`](https://ej2.syncfusion.com/react/documentation/api/chart#subtitlestyle) can be customized:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the chart title and subtitle, enhancing support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately.
Expand All @@ -94,7 +96,7 @@ In the React chart control, the [`titleStyle`](https://ej2.syncfusion.com/react/

## Annotations

The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) property allows you to add annotations to the chart in specific regions. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel#accessibility) properties in [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) can be customized for accessibility:
The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) property allows you to add descriptive text to specific regions of the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/chartAnnotationSettingsModel#accessibility) properties in [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#annotations) can be customized:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the annotation, enhancing support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the annotation, helping screen readers to identify the element appropriately.
Expand All @@ -120,7 +122,7 @@ The [`annotations`](https://ej2.syncfusion.com/react/documentation/api/chart#ann

## Trendline

The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#trendlinemodule) property allows you to display trends in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#accessibility) properties in [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#trendlinemodule) can be customized for accessibility:
The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel) property allows you to display trends in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel#accessibility) properties in [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart/trendlineModel) can be customized for accessibility:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the trendline, enhancing support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the trendline, helping screen readers to identify the element appropriately.
Expand All @@ -140,7 +142,7 @@ The [`trendlines`](https://ej2.syncfusion.com/react/documentation/api/chart#tren

## Zooming

The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel#accessibility) properties in [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) offer the parameters for accessibility customization:
The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/zoomSettingsModel#accessibility) properties in [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zoomsettings) can be customized:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the zoom toolkit items, enhancing support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately.
Expand All @@ -160,7 +162,7 @@ The [`zoomSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#zo

## Technical indicators

The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#accessibility) properties in [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) can be customized for accessibility:
The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/technicalIndicatorModel#accessibility) properties in [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indicators) can be customized:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the indicators, enhancing support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the indicators, helping screen readers to identify the element appropriately.
Expand All @@ -186,7 +188,7 @@ The [`indicators`](https://ej2.syncfusion.com/react/documentation/api/chart#indi

## Legend

The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) provide information about the series shown in the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) can be used to alter the accessibility of the chart's legend:
The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) provides information about the series shown in the chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/chart/legendSettingsModel#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#legendsettings) can be used to alter the accessibility of the chart's legend:

* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers.
* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
Expand All @@ -208,4 +210,9 @@ The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart#
{% endhighlight %}
{% endtabs %}

{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/accessibility-cs8" %}
{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/accessibility-cs8" %}

## See also

* [Accessibility in React Chart component](./accessibility)
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> React components](https://ej2.syncfusion.com/react/documentation/common/accessibility)
11 changes: 6 additions & 5 deletions chart-sdk/react/charts/axis-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ A title can be added to an axis using the [`title`](https://ej2.syncfusion.com/r

## Title Rotation

The orientation of the axis title can be adjusted using the [`titleRotation`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#titlerotation) property. This property supports rotation values from 0 to 360 degrees, allowing better alignment based on the chart layout and available space.
The orientation of the axis title can be adjusted using the [`titleRotation`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#titlerotation) property. This property supports rotation in degrees, with a default value of `0`, allowing better alignment based on the chart layout and available space. It applies to both the X and Y axes.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -75,7 +75,7 @@ The orientation of the axis title can be adjusted using the [`titleRotation`](ht

## Tick Lines Customization

The appearance of both major and minor tick lines can be customized using the [`majorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorTickLines) and [`minorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorTickLines) properties. These properties allow customization of the `width`, `color`, and `size` of tick lines to enhance chart readability.
The appearance of both major and minor tick lines can be customized using the [`majorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorTickLines) and [`minorTickLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorTickLines) properties. These properties allow customization of the `width`, `color`, and `height` of tick lines to enhance chart readability. Note that minor tick lines are rendered only when [`minorTicksPerInterval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minorticksperinterval) is set on the axis.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -96,7 +96,7 @@ The appearance of both major and minor tick lines can be customized using the [`

## Grid Lines Customization

Grid lines can be styled using the [`majorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorGridLines) and [`minorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorGridLines) properties. These options support customization of `width`, `color`, and `dashArray`, helping users distinguish data points and scales more effectively.
Grid lines can be styled using the [`majorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/majorGridLines) and [`minorGridLines`](https://ej2.syncfusion.com/react/documentation/api/chart/minorGridLines) properties. These options support customization of `width`, `color`, and `dashArray` (for example, `"5,5"` to produce a dashed pattern), helping users distinguish data points and scales more effectively. Note that minor grid lines are rendered only when [`minorTicksPerInterval`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#minorticksperinterval) is set on the axis.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -117,7 +117,7 @@ Grid lines can be styled using the [`majorGridLines`](https://ej2.syncfusion.com

## Multiple Axis

In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be associated with a specific axis by mapping it to the axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart.
In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be mapped to a specific axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -138,7 +138,7 @@ In addition to the primary X and Y axes, multiple additional axes can be added t

## Inversed Axis

When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the [`isInversed`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#isinversed) property to `true`. Inversed axes are commonly used in scenarios such as ranking or inverted value representations.
When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the [`isInversed`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#isinversed) property to `true`. Inverted axes are commonly used in scenarios such as ranking or inverted value representations.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -160,6 +160,7 @@ When an axis is inversed, the highest value is displayed closer to the origin, a
## Opposed Position

An axis can be placed on the opposite side of its default position by setting the [`opposedPosition`](https://ej2.syncfusion.com/react/documentation/api/chart/axis#opposedposition) property to `true`. This option is useful when displaying multiple axes or when optimizing space usage in complex chart layouts.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
{% include code-snippet/chart-sdk/react/charts/code-path/series/line-cs2/app/index.jsx %}
Expand Down
Loading