Accessibility customization in EJ2 TypeScript Chart control

19 Dec 202424 minutes to read

The Syncfusion® EJ2 TypeScript Chart control 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 EJ2 TypeScript Chart control’s accessibility customization are briefly explained in this section.

The chart control has a number of characteristics that enable accessibility features to be customized, including:

  • accessibilityDescription - Provides a text description for the chart, improving support for screen readers.
  • accessibilityRole - Specifies the role of the chart, helping screen readers to identify the element appropriately.
  • focusable - Allows the chart to receive focus, making it accessible via keyboard navigation.
  • focusBorderColor - Sets the color of the focus border, enhancing visibility when the chart is focused.
  • focusBorderMargin - Defines the margin around the focus border.
  • focusBorderWidth - Specifies the width of the focus border.
  • tabIndex - Specifies the tab order of the chart element, enabling efficient keyboard navigation.
import { Chart, LineSeries, Tooltip, Legend, Category, DataLabel } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, Tooltip, Legend, Category, DataLabel);
let chartData: Object[] = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
    },
    primaryYAxis: {
        labelFormat: '${value}K'
    },
    series: [
        {
            dataSource: chartData,
            name: 'Sales',
            xName: 'month',
            yName: 'sales',
            type: 'Line',
            marker: {
                visible: true,
                dataLabel: {
                    visible: true
                }
            }
        }
    ],
    tooltip: { enable: true },
    legendSettings: { visible: true },
    title: 'Sales Analysis',
    accessibility: {
        accessibilityDescription: 'A line chart displaying the sales analysis for each month.',
        accessibilityRole: 'chart'
    },
    focusBorderColor: '#FF0000',
    focusBorderWidth: 3,
    focusBorderMargin: 5
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Series

The series supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:

  • accessibilityDescription - Provides a text description for the series root element, enhancing support for screen readers.
  • accessibilityDescriptionFormat - Specifies a format for the accessibility description of each point in the series, allowing dynamic content. The format string can include the placeholders such as ${series.name}, ${point.x}, ${point.y}, ${point.high}, etc. For example, the format “${series.name} : ${point.x}” displays the series name and x-value of the point in the accessibility description. Data point’s values like high, low, open, and close are applicable based on the series types.
  • accessibilityRole - Specifies the role of the series, helping screen readers to identify the element appropriately.
  • focusable - Allows the series to receive focus, making it accessible via keyboard navigation.
  • tabIndex - Specifies the tab order of the series element, enabling efficient keyboard navigation.
import { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);

let columnData: Object[] = [
    { country: "USA",       gold: 50 },
    { country: "China",     gold: 40 },
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 },
    { country: "France",    gold: 50 },
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 },
    { country: "Sweden",    gold: 30 }
];

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, 
        maximum: 80,
        interval: 20, 
        title: 'Medals'
    },
    series:[{
        dataSource: columnData,
        xName: 'country', yName: 'gold',
        type: 'Column',
        accessibility: {
            accessibilityDescription: 'This series displays the number of gold medals won by each country in the Olympics.',
            accessibilityRole: 'series',
            accessibilityDescriptionFormat: 'The country ${point.x} won ${point.y} gold medals.'
        }
    }],
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Title and subtitle

In the EJ2 TypeScript chart control, the titleStyle and subTitleStyle attributes allow you to customize the accessibility of the chart’s title and subtitle. The following accessibility properties in titleStyle and subTitleStyle can be customized for accessibility:

  • accessibilityDescription - Provides a text description for the chart title and subtitle, enhancing support for screen readers.
  • accessibilityRole - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately.
  • focusable - Enables or disables the keyboard navigation focus for the title and subtitle.
  • tabIndex - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation.
import { Chart, ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, Legend);

let columnData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries',
        labelPlacement: 'OnTicks'
    },
    primaryYAxis: {
        minimum: 0, 
        maximum: 80,
        interval: 20, 
        title: 'Medals'
    },
    series: [
        {
            dataSource: columnData,
            xName: 'country', yName: 'gold',
            name: 'Gold', type: 'Column'
        }, 
        {
            dataSource: columnData,
            xName: 'country', yName: 'silver',
            name: 'Silver', type: 'Column'
        }, 
        {
            dataSource: columnData,
            xName: 'country', yName: 'bronze',
            name: 'Bronze', type: 'Column'
        }
    ],
    title: 'Olympic Medals Comparison by Country',
    titleStyle: {
        accessibility: {
            accessibilityDescription: 'This chart shows the number of gold, silver, and bronze medals won by different countries in the Olympics.',
            accessibilityRole: 'heading'
        }
    },
    subTitle: 'Medal Comparison',
    subTitleStyle: {
        accessibility: {
            accessibilityDescription: 'The subtitle provides additional context for the Olympic medal distribution chart.',
            accessibilityRole: 'heading'
        }
    }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Annotations

The annotations property allows you to add annotations to the chart in specific regions. The following accessibility properties in annotations can be customized for accessibility:

  • accessibilityDescription - Provides a text description for the annotation, enhancing support for screen readers.
  • accessibilityRole - Specifies the role of the annotation, helping screen readers to identify the element appropriately.
  • focusable - Specifies whether annotations are focusable via keyboard navigation.
  • tabIndex - Specifies the tab order of the annotation element, enabling efficient keyboard navigation.
import { Chart, ColumnSeries, Category, ChartAnnotation } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, ChartAnnotation);

let columnData: Object[] = [
    { country: "USA",       gold: 50 }, 
    { country: "China",     gold: 40 }, 
    { country: "Japan",     gold: 70 },
    { country: "Australia", gold: 60 }, 
    { country: "France",    gold: 50 }, 
    { country: "Germany",   gold: 40 },
    { country: "Italy",     gold: 40 }, 
    { country: "Sweden",    gold: 30 }
];

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        title: 'Medals'
    },
    annotations: [{
        content: '<div style="border: 1px solid #000; background-color: #f8f8f8; padding: 5px; border-radius: 4px; font-size: 12px; font-weight: bold;">70 Gold Medals</div>',
        coordinateUnits: 'Point',
        x: 'France',
        y: 55,
        accessibility: {
            accessibilityDescription: 'Annotation indicating that France has won 70 Gold Medals.',
            accessibilityRole: 'note',
            focusable: true
        }
    }],
    series: [
        {
            dataSource: columnData,
            xName: 'country', 
            yName: 'gold',
            type: 'Column'
        }
    ],
    title: 'Olympic Medals'
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Trendline

The trendlines property allows you to display trends in the data. The following accessibility properties in trendlines can be customized for accessibility:

  • accessibilityDescription - Provides a text description for the trendline, enhancing support for screen readers.
  • accessibilityRole - Specifies the role of the trendline, helping screen readers to identify the element appropriately.
  • focusable - Specifies whether trendlines are focusable via keyboard navigation.
  • tabIndex - Specifies the tab order of the trendline element, enabling efficient keyboard navigation.
import { Chart, Trendlines, ScatterSeries, LineSeries, Tooltip, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(Trendlines, ScatterSeries, LineSeries, Tooltip, Legend);

let data: Object[] = [];
let yValue: number[] = [7.66, 8.03, 8.41, 8.97, 8.77, 8.20, 8.16, 7.89, 8.68, 9.48, 10.11, 11.36, 12.34, 12.60, 12.95, 13.91, 16.21, 17.50, 22.72, 28.14, 31.26, 31.39, 32.43, 35.52, 36.36,
    41.33, 43.12, 45.00, 47.23, 48.62, 46.60, 45.28, 44.01, 45.17, 41.20, 43.41, 48.32, 45.65, 46.61, 53.34, 58.53];
let point: Object;
let i: number; let j: number = 0;
for (i = 1973; i <= 2013; i++) {
    point = { x: i, y: yValue[j] };
    data.push(point);
    j++;
}

let chart: Chart = new Chart({
    primaryXAxis: {
        title: 'Months',
    },
    primaryYAxis: {
        title: 'Rupees against Dollars',
        interval: 5
    },
    series: [
        {
            dataSource: data,
            xName: 'x', yName: 'y',
            name: 'Apple Inc',
            fill: '#0066FF',
            type: 'Scatter',
            trendlines: [
                {
                    type: 'Linear',
                    accessibility: {
                        accessibilityDescription: 'A linear trendline representing the general trend of the historical Indian Rupee rate against the US Dollar.',
                        accessibilityRole: 'line'
                    }
                }
            ]
        }
    ],
    tooltip: { enable: true },
    chartArea: { border: { width: 0 } },
    title: 'Historical Indian Rupee Rate (INR USD)',
    legendSettings: { visible: false }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Zooming

The zoomSettings attributes allow you to adjust the chart’s zooming capability. The following accessibility properties in zoomSettings offer the parameters for accessibility customization:

  • accessibilityDescription - Provides a text description for the zoom toolkit items, enhancing support for screen readers.
  • accessibilityRole - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately.
  • focusable - Specifies whether zoom toolkit items are focusable via keyboard navigation.
  • tabIndex - Specifies the tab order of the zooming element, enabling efficient keyboard navigation.
import { Chart, AreaSeries, Legend, Zoom, DateTime } from '@syncfusion/ej2-charts';
Chart.Inject(AreaSeries, Legend, Zoom, DateTime);

let series1: Object[] = [];
let point1: Object;
let value: number = 40;
let i: number;
for (i = 1; i < 500; i++) {
    if (Math.random() > .5) {
        value += Math.random();
    } else {
        value -= Math.random();
    }
    point1 = { x: new Date(1950, i + 2, i), y: value.toFixed(1) };
    series1.push(point1);
}

let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'DateTime'
    },
    series: [
        {
            type: 'Area',
            dataSource: series1,
            name: 'Product X',
            xName: 'x',
            yName: 'y',
            border: { width: 0.5, color: '#00bdae' },
            animation: { enable: false }
        }
    ],
    zoomSettings: {
        enableMouseWheelZooming: true,
        enablePinchZooming: true,
        enableSelectionZooming: true,
        accessibility: {
            accessibilityDescription: 'This allows users to zoom in and out of the chart using mouse wheel, pinch gestures, or selection box.',
            accessibilityRole: 'zoom'
        }
    },
    title: 'Sales History of Product X',
    legendSettings: { visible: false }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Technical indicators

The indicators property allows you to analyze the trends and patterns in the data. The following accessibility properties in indicators can be customized for accessibility:

  • accessibilityDescription - Provides a text description for the indicators, enhancing support for screen readers.
  • accessibilityRole - Specifies the role of the indicators, helping screen readers to identify the element appropriately.
  • focusable - Specifies whether indicators are focusable via keyboard navigation.
  • tabIndex - Specifies the tab order of the indicators element, enabling efficient keyboard navigation.
import { Chart, LineSeries, DateTime, CandleSeries, AccumulationDistributionIndicator, Tooltip, Crosshair, Legend, IAxisLabelRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, DateTime, CandleSeries, AccumulationDistributionIndicator, Tooltip, Crosshair, Legend);
let chartData: any[] = [
    { x: new Date('2012-10-15'), open: 90.3357, high: 93.2557, low: 87.0885, close: 87.12, volume: 646996264 },
    { x: new Date('2012-10-22'), open: 87.4885, high: 90.7685, low: 84.4285, close: 86.2857, volume: 866040680 },
    { x: new Date('2012-10-29'), open: 84.9828, high: 86.1428, low: 82.1071, close: 82.4, volume: 367371310 },
    { x: new Date('2012-11-05'), open: 83.3593, high: 84.3914, low: 76.2457, close: 78.1514, volume: 919719846 },
    { x: new Date('2012-11-12'), open: 79.1643, high: 79.2143, low: 72.25, close: 75.3825, volume: 894382149 },
    { x: new Date('2012-11-19'), open: 77.2443, high: 81.7143, low: 77.1257, close: 81.6428, volume: 527416747 },
    { x: new Date('2012-11-26'), open: 82.2714, high: 84.8928, low: 81.7514, close: 83.6114, volume: 646467974 },
    { x: new Date('2012-12-03'), open: 84.8071, high: 84.9414, low: 74.09, close: 76.1785, volume: 980096264 },
    { x: new Date('2012-12-10'), open: 75, high: 78.5085, low: 72.2257, close: 72.8277, volume: 835016110 },
    { x: new Date('2012-12-17'), open: 72.7043, high: 76.4143, low: 71.6043, close: 74.19, volume: 726150329 },
    { x: new Date('2012-12-24'), open: 74.3357, high: 74.8928, low: 72.0943, close: 72.7984, volume: 321104733 },
    { x: new Date('2012-12-31'), open: 72.9328, high: 79.2857, low: 72.7143, close: 75.2857, volume: 540854882 },
    { x: new Date('2013-01-07'), open: 74.5714, high: 75.9843, low: 73.6, close: 74.3285, volume: 574594262 },
    { x: new Date('2013-01-14'), open: 71.8114, high: 72.9643, low: 69.0543, close: 71.4285, volume: 803105621 },
    { x: new Date('2013-01-21'), open: 72.08, high: 73.57, low: 62.1428, close: 62.84, volume: 971912560 },
    { x: new Date('2013-01-28'), open: 62.5464, high: 66.0857, low: 62.2657, close: 64.8028, volume: 656549587 },
    { x: new Date('2013-02-04'), open: 64.8443, high: 68.4014, low: 63.1428, close: 67.8543, volume: 743778993 },
    { x: new Date('2013-02-11'), open: 68.0714, high: 69.2771, low: 65.7028, close: 65.7371, volume: 585292366 },
    { x: new Date('2013-02-18'), open: 65.8714, high: 66.1043, low: 63.26, close: 64.4014, volume: 421766997 },
    { x: new Date('2013-02-25'), open: 64.8357, high: 65.0171, low: 61.4257, close: 61.4957, volume: 582741215 },
    { x: new Date('2013-03-04'), open: 61.1143, high: 62.2043, low: 59.8571, close: 61.6743, volume: 632856539 },
    { x: new Date('2013-03-11'), open: 61.3928, high: 63.4614, low: 60.7343, close: 63.38, volume: 572066981 },
    { x: new Date('2013-03-18'), open: 63.0643, high: 66.0143, low: 63.0286, close: 65.9871, volume: 552156035 },
    { x: new Date('2013-03-25'), open: 66.3843, high: 67.1357, low: 63.0886, close: 63.2371, volume: 390762517 },
    { x: new Date('2013-04-01'), open: 63.1286, high: 63.3854, low: 59.9543, close: 60.4571, volume: 505273732 },
    { x: new Date('2013-04-08'), open: 60.6928, high: 62.57, low: 60.3557, close: 61.4, volume: 387323550 },
    { x: new Date('2013-04-15'), open: 61, high: 61.1271, low: 55.0143, close: 55.79, volume: 709945604 },
    { x: new Date('2013-04-22'), open: 56.0914, high: 59.8241, low: 55.8964, close: 59.6007, volume: 787007506 },
    { x: new Date('2013-04-29'), open: 60.0643, high: 64.7471, low: 60, close: 64.2828, volume: 655020017 },
    { x: new Date('2013-05-06'), open: 65.1014, high: 66.5357, low: 64.3543, close: 64.71, volume: 545488533 },
    { x: new Date('2013-05-13'), open: 64.5014, high: 65.4143, low: 59.8428, close: 61.8943, volume: 633706550 },
    { x: new Date('2013-05-20'), open: 61.7014, high: 64.05, low: 61.4428, close: 63.5928, volume: 494379068 },
    { x: new Date('2013-05-27'), open: 64.2714, high: 65.3, low: 62.7714, close: 64.2478, volume: 362907830 },
    { x: new Date('2013-06-03'), open: 64.39, high: 64.9186, low: 61.8243, close: 63.1158, volume: 443249793 },
    { x: new Date('2013-06-10'), open: 63.5328, high: 64.1541, low: 61.2143, close: 61.4357, volume: 389680092 },
    { x: new Date('2013-06-17'), open: 61.6343, high: 62.2428, low: 58.3, close: 59.0714, volume: 400384818 },
    { x: new Date('2013-06-24'), open: 58.2, high: 58.38, low: 55.5528, close: 56.6471, volume: 519314826 },
    { x: new Date('2013-07-01'), open: 57.5271, high: 60.47, low: 57.3171, close: 59.6314, volume: 343878841 },
    { x: new Date('2013-07-08'), open: 60.0157, high: 61.3986, low: 58.6257, close: 60.93, volume: 384106977 },
    { x: new Date('2013-07-15'), open: 60.7157, high: 62.1243, low: 60.5957, close: 60.7071, volume: 286035513 },
    { x: new Date('2013-07-22'), open: 61.3514, high: 63.5128, low: 59.8157, close: 62.9986, volume: 395816827 },
    { x: new Date('2013-07-29'), open: 62.9714, high: 66.1214, low: 62.8857, close: 66.0771, volume: 339668858 },
    { x: new Date('2013-08-12'), open: 65.2657, high: 72.0357, low: 65.2328, close: 71.7614, volume: 711563584 },
    { x: new Date('2013-08-19'), open: 72.0485, high: 73.3914, low: 71.1714, close: 71.5743, volume: 417119660 },
    { x: new Date('2013-08-26'), open: 71.5357, high: 72.8857, low: 69.4286, close: 69.6023, volume: 392805888 },
    { x: new Date('2013-09-02'), open: 70.4428, high: 71.7485, low: 69.6214, close: 71.1743, volume: 317244380 },
    { x: new Date('2013-09-09'), open: 72.1428, high: 72.56, low: 66.3857, close: 66.4143, volume: 669376320 },
    { x: new Date('2013-09-16'), open: 65.8571, high: 68.3643, low: 63.8886, close: 66.7728, volume: 625142677 },
    { x: new Date('2013-09-23'), open: 70.8714, high: 70.9871, low: 68.6743, close: 68.9643, volume: 475274537 },
    { x: new Date('2013-09-30'), open: 68.1786, high: 70.3357, low: 67.773, close: 69.0043, volume: 368198906 },
    { x: new Date('2013-10-07'), open: 69.5086, high: 70.5486, low: 68.3257, close: 70.4017, volume: 361437661 },
    { x: new Date('2013-10-14'), open: 69.9757, high: 72.7514, low: 69.9071, close: 72.6985, volume: 342694379 },
    { x: new Date('2013-10-21'), open: 73.11, high: 76.1757, low: 72.5757, close: 75.1368, volume: 490458997 },
    { x: new Date('2013-10-28'), open: 75.5771, high: 77.0357, low: 73.5057, close: 74.29, volume: 508130174 },
    { x: new Date('2013-11-04'), open: 74.4428, high: 75.555, low: 73.1971, close: 74.3657, volume: 318132218 },
    { x: new Date('2013-11-11'), open: 74.2843, high: 75.6114, low: 73.4871, close: 74.9987, volume: 306711021 },
    { x: new Date('2013-11-18'), open: 74.9985, high: 75.3128, low: 73.3814, close: 74.2571, volume: 282778778 },
];
let chart: Chart = new Chart({
    primaryXAxis: {
        title: 'Months',
        valueType: 'DateTime',
        intervalType: 'Months',
        majorGridLines: { width: 0 },
        crosshairTooltip: { enable: true },
    },
    primaryYAxis: {
        title: 'Price (Million Dollars)',
        minimum: 30,
        maximum: 180,
        interval: 30,
    },
    axes: [{
        name: 'secondary',
        minimum: -7000000000, maximum: 5000000000,
        interval: 6000000000,
        majorGridLines: { width: 0 },
        opposedPosition: true
    }],
    series: [{
        dataSource: chartData, width: 2,
        xName: 'x', yName: 'y', low: 'low', 
        high: 'high', close: 'close', volume: 'volume', 
        open: 'open', name: 'Apple Inc',
        type: 'Candle', animation: { enable: true }
    }],
    indicators: [{
        type: 'AccumulationDistribution', field: 'Close', 
        seriesName: 'Apple Inc', yAxisName: 'secondary', fill: 'blue',
        period: 3, animation: { enable: true },
        accessibility: {
            accessibilityDescription: 'The Accumulation Distribution indicator is used to assess the buying and selling pressure of Apple Inc. stock.',
            accessibilityRole: 'indicator'
        }
    }],
    tooltip: { enable: true, shared: true },
    chartArea: { border: { width: 0 } },
    axisLabelRender: (args: IAxisLabelRenderEventArgs) => {
        if (args.axis.name === 'secondary') {
            let value: number = Number(args.text) / 1000000000;
            args.text = String(value) + 'bn';
        }
    },
    crosshair: { enable: true, lineType: 'Vertical' },
    title: 'AAPL - 2016/2017',
    legendSettings: { visible: false }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>

Legend

The legendSettings provide information about the series shown in the chart. The following accessibility properties in legendSettings can be used to alter the accessibility of the chart’s legend:

  • accessibilityDescription - Provides a text description for the legend root element, enhancing support for screen readers.
  • accessibilityRole - Specifies the role of the legend items to screen readers, providing appropriate context.
  • focusable - Specifies whether legend items are focusable via keyboard navigation.
  • tabIndex - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
import { Chart, ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, Legend);
let chartData: Object[] = [
    { country: "USA",       gold: 50, silver: 70, bronze: 45 },
    { country: "China",     gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",     gold: 70, silver: 60, bronze: 50 },
    { country: "Australia", gold: 60, silver: 56, bronze: 40 },
    { country: "France",    gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",   gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",     gold: 40, silver: 35, bronze: 37 },
    { country: "Sweden",    gold: 30, silver: 25, bronze: 27 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category',
        title: 'Countries'
    },
    primaryYAxis: {
        minimum: 0, 
        maximum: 80,
        interval: 20, 
        title: 'Medals'
    },
    series: [
        {
            dataSource: chartData,
            xName: 'country', yName: 'gold',
            name: 'Gold', type: 'Column'
        }, 
        {
            dataSource: chartData,
            xName: 'country', yName: 'silver',
            name: 'Silver', type: 'Column'
        }, 
        {
            dataSource: chartData,
            xName: 'country', yName: 'bronze',
            name: 'Bronze', type: 'Column'
        }
    ],
    title: 'Olympic Medals',
    legendSettings: {
        visible: true,
        accessibility: {
            accessibilityDescription: 'Legend displaying medal counts by country for Gold, Silver, and Bronze.',
            accessibilityRole: 'presentation'
        }
    }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>