Contents
- Series
- Title and subtitle
- Annotations
- Trendline
- Zooming
- Technical indicators
- Legend
Having trouble getting help?
Contact Support
Contact Support
Accessibility customization in React Chart component
19 Dec 202424 minutes to read
The Syncfusion® React 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 React 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, Tooltip, Legend, Category, DataLabel } from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category' };
const primaryyAxis = { labelFormat: '${value}K' };
const tooltip = { enable: true };
const legendSettings = { visible: true };
const accessibility = {
accessibilityDescription: 'A line chart displaying the sales analysis for each month.',
accessibilityRole: 'chart'
};
const marker = { visible: true, dataLabel: { visible: true } };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
legendSettings={legendSettings}
accessibility={accessibility}
focusBorderColor='#FF0000'
focusBorderWidth={3}
focusBorderMargin={5}
title='Sales Analysis'>
<Inject services={[LineSeries, Tooltip, Legend, Category, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='month' yName='sales' name='Sales' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, TooltipSettingsModel, LegendSettingsModel, AccessibilityModel, LineSeries, Tooltip, Legend, Category, DataLabel } from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category' };
const primaryyAxis: AxisModel = { labelFormat: '${value}K' };
const tooltip: TooltipSettingsModel = { enable: true };
const legendSettings: LegendSettingsModel = { visible: true };
const accessibility: AccessibilityModel = {
accessibilityDescription: 'A line chart displaying the sales analysis for each month.',
accessibilityRole: 'chart'
};
const marker = { visible: true, dataLabel: { visible: true } };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
legendSettings={legendSettings}
accessibility={accessibility}
focusBorderColor='#FF0000'
focusBorderWidth={3}
focusBorderMargin={5}
title='Sales Analysis'>
<Inject services={[LineSeries, Tooltip, Legend, Category, DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='month' yName='sales' name='Sales' type='Line' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let chartData = [
{ 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 }
];export 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 }
];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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category } from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const 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.'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' accessibility={accessibility}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, SeriesAccessibilityModel, ColumnSeries, Category } from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const accessibility: SeriesAccessibilityModel = {
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.'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' accessibility={accessibility}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let columnData = [
{ 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 }
];export 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 }
];Title and subtitle
In the React 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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Legend } from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
const primaryxAxis = {
valueType: 'Category',
title: 'Countries',
labelPlacement: 'OnTicks'
};
const primaryyAxis = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
const titleStyle = {
accessibility: {
accessibilityDescription: 'This chart shows the number of gold, silver, and bronze medals won by different countries in the Olympics.',
accessibilityRole: 'heading'
}
};
const subTitleStyle = {
accessibility: {
accessibilityDescription: 'The subtitle provides additional context for the Olympic medal distribution chart.',
accessibilityRole: 'heading'
}
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals Comparison by Country' titleStyle={titleStyle} subTitle='Medal Comparison' subTitleStyle={subTitleStyle}>
<Inject services={[ColumnSeries, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' name='Gold'>
</SeriesDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='silver' type='Column' name='Silver'>
</SeriesDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='bronze' type='Column' name='Bronze'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, titleSettingsModel, ColumnSeries, Category, Legend } from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
valueType: 'Category',
title: 'Countries',
labelPlacement: 'OnTicks'
};
const primaryyAxis: AxisModel = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
const titleStyle: titleSettingsModel = {
accessibility: {
accessibilityDescription: 'This chart shows the number of gold, silver, and bronze medals won by different countries in the Olympics.',
accessibilityRole: 'heading'
}
};
const subTitleStyle: titleSettingsModel = {
accessibility: {
accessibilityDescription: 'The subtitle provides additional context for the Olympic medal distribution chart.',
accessibilityRole: 'heading'
}
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals Comparison by Country' titleStyle={titleStyle} subTitle='Medal Comparison' subTitleStyle={subTitleStyle}>
<Inject services={[ColumnSeries, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column' name='Gold'>
</SeriesDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='silver' type='Column' name='Silver'>
</SeriesDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='bronze' type='Column' name='Bronze'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let columnData = [
{ 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 }
];export 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 }
];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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AnnotationsDirective, AnnotationDirective, Inject, ColumnSeries, Category, ChartAnnotation } from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { title: 'Medals' };
const accessibility = {
accessibilityDescription: 'Annotation indicating that France has won 70 Gold Medals.',
accessibilityRole: 'note',
focusable: true
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Category, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective 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={accessibility}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AnnotationsDirective, AnnotationDirective, Inject, AxisModel, AccessibilityModel, ColumnSeries, Category, ChartAnnotation } from'@syncfusion/ej2-react-charts';
import { columnData } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { title: 'Medals' };
const accessibility: AccessibilityModel = {
accessibilityDescription: 'Annotation indicating that France has won 70 Gold Medals.',
accessibilityRole: 'note',
focusable: true
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Category, ChartAnnotation]} />
<AnnotationsDirective>
<AnnotationDirective 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={accessibility}>
</AnnotationDirective>
</AnnotationsDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={columnData} xName='country' yName='gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let columnData = [
{ 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 }
];export 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 }
];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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, Trendlines, ScatterSeries, LineSeries, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
function App() {
const series1 = [];
const yValue = [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];
function chartLoad() {
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis = { title: 'Months' };
const primaryyAxis = { title: 'Rupees against Dollars', interval: 5 };
const tooltip = { enable: true };
const chartarea = { border: { width: 0 } };
const accessibility = {
accessibilityDescription: 'A linear trendline representing the general trend of the historical Indian Rupee rate against the US Dollar.',
accessibilityRole: 'line'
};
const legendSettings = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
legendSettings={legendSettings}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Trendlines, ScatterSeries, LineSeries, Tooltip, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' accessibility={accessibility}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlineDirective, TrendlinesDirective, Inject, AxisModel, TooltipSettingsModel, ChartAreaModel, AccessibilityModel, LegendSettingsModel, Trendlines, ScatterSeries, LineSeries, Tooltip, Legend } from '@syncfusion/ej2-react-charts';
function App() {
const series1: Object[] = [];
const 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];
function chartLoad(): void {
let i: number;
let j: number = 0;
for (i = 1973; i <= 2013; i++) {
series1.push({ x: i, y: yValue[j] });
j++;
}
}
const primaryxAxis: AxisModel = { title: 'Months' };
const primaryyAxis: AxisModel = { title: 'Rupees against Dollars', interval: 5 };
const tooltip: TooltipSettingsModel = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const accessibility: AccessibilityModel = {
accessibilityDescription: 'A linear trendline representing the general trend of the historical Indian Rupee rate against the US Dollar.',
accessibilityRole: 'line'
};
const legendSettings: LegendSettingsModel = { visible: false };
chartLoad();
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
chartArea={chartarea}
legendSettings={legendSettings}
title='Historical Indian Rupee Rate (INR USD)'>
<Inject services={[Trendlines, ScatterSeries, LineSeries, Tooltip, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Apple Inc' type='Scatter' fill='#0066FF'>
<TrendlinesDirective>
<TrendlineDirective type='Linear' accessibility={accessibility}>
</TrendlineDirective>
</TrendlinesDirective>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AreaSeries, Legend, Zoom, DateTime } from'@syncfusion/ej2-react-charts';
function App() {
let series1 = [];
let point1;
let value = 40;
function chartLoad() {
let i;
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);
}
}
const primaryxAxis = { valueType: 'DateTime' };
const legendSettings = { visible: false };
const 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'
}
};
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomsettings} title='Sales History of Product X'>
<Inject services={[AreaSeries, Legend, Zoom, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Product X' type='Area' border={border} animation={animation}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, LegendSettingsModel, ZoomSettingsModel, AreaSeries, Legend, Zoom, DateTime } from'@syncfusion/ej2-react-charts';
function App() {
let series1: Object[] = [];
let point1: Object;
let value: number = 40;
function chartLoad(): void {
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);
}
}
const primaryxAxis: AxisModel = { valueType: 'DateTime' };
const legendSettings: LegendSettingsModel = { visible: false };
const zoomsettings: ZoomSettingsModel = {
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'
}
};
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };
chartLoad();
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} legendSettings={legendSettings} zoomSettings={zoomsettings} title='Sales History of Product X'>
<Inject services={[AreaSeries, Legend, Zoom, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={series1} xName='x' yName='y' name='Product X' type='Area' border={border} animation={animation}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AxesDirective, AxisDirective, Inject, IndicatorsDirective, IndicatorDirective,
LineSeries, DateTime, CandleSeries, AccumulationDistributionIndicator, Tooltip, Crosshair, Legend } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
const axisLableRender = (args) => {
if (args.axis.name === 'secondary') {
let value = Number(args.text) / 1000000000;
args.text = String(value) + 'bn';
}
};
const primaryxAxis = { title: 'Months', valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
const primaryyAxis = { title: 'Price (Million Dollars)', minimum: 30, maximum: 180, interval: 30 };
const animation = { enable: true };
const chartarea = { border: { width: 0 } };
const crosshair = { enable: true, lineType: 'Vertical' };
const tooltip = { enable: true, shared: true };
const lines = { width: 0 };
const accessibility = {
accessibilityDescription: 'The Accumulation Distribution indicator is used to assess the buying and selling pressure of Apple Inc. stock.',
accessibilityRole: 'indicator'
};
const legendSettings = { visible: false };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
crosshair={crosshair}
axisLabelRender={axisLableRender.bind(this)}
chartArea={chartarea}
legendSettings={legendSettings}
title='AAPL - 2016/2017'>
<Inject services={[LineSeries, DateTime, CandleSeries, AccumulationDistributionIndicator, Tooltip, Crosshair, Legend]} />
<AxesDirective>
<AxisDirective name='secondary' opposedPosition={true} majorGridLines={lines} minimum={-7000000000} maximum={5000000000} interval={6000000000}>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' type='Candle' animation={animation}>
</SeriesDirective>
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='blue' period={3} animation={animation} accessibility={accessibility}>
</IndicatorDirective>
</IndicatorsDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, AxesDirective, AxisDirective, Inject, AxisModel, ChartAreaModel, LegendSettingsModel, CrosshairSettingsModel, IAxisLabelRenderEventArgs, TooltipSettingsModel, AccessibilityModel,
IndicatorsDirective, IndicatorDirective, LineSeries, DateTime, CandleSeries, AccumulationDistributionIndicator, Tooltip, Crosshair, Legend } from '@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
const axisLableRender = (args: IAxisLabelRenderEventArgs): void => {
if (args.axis.name === 'secondary') {
let value: number = Number(args.text) / 1000000000;
args.text = String(value) + 'bn';
}
}
const primaryxAxis: AxisModel = { title: 'Months', valueType: 'DateTime', intervalType: 'Months', majorGridLines: { width: 0 }, crosshairTooltip: { enable: true } };
const primaryyAxis: AxisModel = { title: 'Price (Million Dollars)', minimum: 30, maximum: 180, interval: 30 };
const animation = { enable: true };
const chartarea: ChartAreaModel = { border: { width: 0 } };
const crosshair: CrosshairSettingsModel = { enable: true, lineType: 'Vertical' };
const tooltip: TooltipSettingsModel = { enable: true, shared: true };
const lines = { width: 0 };
const accessibility: AccessibilityModel = {
accessibilityDescription: 'The Accumulation Distribution indicator is used to assess the buying and selling pressure of Apple Inc. stock.',
accessibilityRole: 'indicator'
};
const legendSettings: LegendSettingsModel = { visible: false };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
tooltip={tooltip}
crosshair={crosshair}
axisLabelRender={axisLableRender.bind(this)}
chartArea={chartarea}
legendSettings={legendSettings}
title='AAPL - 2016/2017'>
<Inject services={[LineSeries, DateTime, CandleSeries, AccumulationDistributionIndicator, Tooltip, Crosshair, Legend]} />
<AxesDirective>
<AxisDirective name='secondary' opposedPosition={true} majorGridLines={lines} minimum={-7000000000} maximum={5000000000} interval={6000000000}>
</AxisDirective>
</AxesDirective>
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} width={2} xName='x' yName='y' low='low' high='high' close='close' volume='volume' open='open' name='Apple Inc' type='Candle' animation={animation}>
</SeriesDirective>
</SeriesCollectionDirective>
<IndicatorsDirective>
<IndicatorDirective type='AccumulationDistribution' field='Close' seriesName='Apple Inc' yAxisName='secondary' fill='blue' period={3} animation={animation} accessibility={accessibility}>
</IndicatorDirective>
</IndicatorsDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let chartData = [
{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}
];export let chartData: Object[] = [
{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}
];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 * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Legend } from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings = {
visible: true,
accessibility: {
accessibilityDescription: 'Legend displaying medal counts by country for Gold, Silver, and Bronze.',
accessibilityRole: 'presentation'
}
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals' legendSettings={legendSettings}>
<Inject services={[ColumnSeries, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column' name='Gold'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='country' yName='silver' type='Column' name='Silver'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='country' yName='bronze' type='Column' name='Bronze'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, LegendSettingsModel, ColumnSeries, Category, Legend } from'@syncfusion/ej2-react-charts';
import { chartData } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const legendSettings: LegendSettingsModel = {
visible: true,
accessibility: {
accessibilityDescription: 'Legend displaying medal counts by country for Gold, Silver, and Bronze.',
accessibilityRole: 'presentation'
}
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals' legendSettings={legendSettings}>
<Inject services={[ColumnSeries, Category, Legend]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={chartData} xName='country' yName='gold' type='Column' name='Gold'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='country' yName='silver' type='Column' name='Silver'>
</SeriesDirective>
<SeriesDirective dataSource={chartData} xName='country' yName='bronze' type='Column' name='Bronze'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let chartData = [
{ 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 }
];export 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 }
];