Accessibility customization in Vue Chart component
21 Dec 202424 minutes to read
The Syncfusion® Vue Chart component 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 Vue Chart component’s accessibility customization are briefly explained in this section.
The chart component 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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :focusBorderColor="focusBorderColor" :focusBorderWidth="focusBorderWidth" :focusBorderMargin="focusBorderMargin" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :accessibility='accessibility' :tooltip='tooltip' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' name='Sales' type='Line' xName='month' yName='sales' :marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, Category, LineSeries, Tooltip, Legend, DataLabel } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ 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 }
];
const primaryXAxis = {
valueType: 'Category'
};
const primaryYAxis = {
labelFormat: '${value}K'
};
const marker = {
visible: true,
dataLabel: {
visible: true
}
};
const title = "Sales Analysis";
const accessibility = {
accessibilityDescription: 'A line chart displaying the sales analysis for each month.',
accessibilityRole: 'chart'
};
const focusBorderColor='#FF0000';
const focusBorderWidth=3;
const focusBorderMargin=5;
const tooltip = { enable: true };
const legendSettings = { visible: true };
provide('chart', [Category, LineSeries, Tooltip, Legend, DataLabel]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :focusBorderColor="focusBorderColor" :focusBorderWidth="focusBorderWidth" :focusBorderMargin="focusBorderMargin" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :accessibility='accessibility' :tooltip='tooltip' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' name='Sales' type='Line' xName='month' yName='sales' :marker='marker'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Category, LineSeries, Tooltip, Legend, DataLabel } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ 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 }
],
primaryXAxis: {
valueType: 'Category'
},
primaryYAxis: {
labelFormat: '${value}K'
},
marker: {
visible: true,
dataLabel: {
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,
tooltip: { enable: true },
legendSettings: { visible: true }
};
},
provide: {
chart: [Category, LineSeries, Tooltip, Legend, DataLabel]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' :accessibility='accessibility'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ 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 }
];
const primaryXAxis = {
valueType: 'Category',
title: 'Countries'
};
const primaryYAxis = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
const title = 'Olympic 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.'
};
provide('chart', [ColumnSeries, Category]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' :accessibility='accessibility'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data: function () {
return {
seriesData: [
{ 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 }
],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
},
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'
};
},
provide: {
chart: [ColumnSeries, Category]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>Title and subtitle
In the Vue chart component, 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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :titleStyle='titleStyle' :subTitleStyle='subTitleStyle' :subTitle='subTitle' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Legend } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ 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 }
];
const primaryXAxis = {
valueType: 'Category',
title: 'Countries',
labelPlacement: 'OnTicks'
};
const primaryYAxis = {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
};
const title = 'Olympic Medals Comparison by Country';
const subTitle= 'Medal Comparison';
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'
}
};
provide('chart', [ColumnSeries, Category, Legend]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :titleStyle='titleStyle' :subTitleStyle='subTitleStyle' :subTitle='subTitle' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Legend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data: function () {
return {
seriesData: [
{ 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 }
],
primaryXAxis: {
valueType: 'Category',
title: 'Countries',
labelPlacement: 'OnTicks'
},
primaryYAxis: {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
},
title: 'Olympic Medals Comparison by Country',
subTitle: 'Medal Comparison',
titleStyle: {
accessibility: {
accessibilityDescription: 'This chart shows the number of gold, silver, and bronze medals won by different countries in the Olympics.',
accessibilityRole: 'heading'
}
},
subTitleStyle: {
accessibility: {
accessibilityDescription: 'The subtitle provides additional context for the Olympic medal distribution chart.',
accessibilityRole: 'heading'
}
}
};
},
provide: {
chart: [ColumnSeries, Category, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ 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 }
];
const 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
}
}];
const primaryXAxis = {
valueType: 'Category',
title: 'Countries'
};
const primaryYAxis = {
title: 'Medals'
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category, ChartAnnotation]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :annotations='annotations'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, ChartAnnotation } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: [
{ 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 }
],
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
}
}],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
title: 'Medals'
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, ChartAnnotation]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>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.
<template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip' :chartArea='chartArea' :title='title' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y' name='Apple Inc' fill='#0066FF'>
<e-trendlines>
<e-trendline :type='type' :accessibility='accessibility'>
</e-trendline>
</e-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, TrendlinesDirective as ETrendlines, TrendlineDirective as ETrendline, ScatterSeries, Trendlines, LineSeries, Tooltip, Legend } from "@syncfusion/ej2-vue-charts";
let series1 = [];
let 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];
let point1;
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
point1 = { x: i, y: yValue[j] };
series1.push(point1);
j++;
}
const seriesData = series1;
const primaryXAxis = {
title: 'Months'
};
const primaryYAxis = {
title: 'Rupees against Dollars',
interval: 5
};
const type = 'Linear';
const accessibility = {
accessibilityDescription: 'A linear trendline representing the general trend of the historical Indian Rupee rate against the US Dollar.',
accessibilityRole: 'line'
};
const tooltip = { enable: true };
const chartArea = { border: { width: 0 } };
const title = 'Historical Indian Rupee Rate (INR USD)';
const legendSettings = { visible: false };
provide('chart', [ScatterSeries, Trendlines, LineSeries, Tooltip, Legend]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :tooltip='tooltip' :chartArea='chartArea' :title='title' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Scatter' xName='x' yName='y' name='Apple Inc' fill='#0066FF'>
<e-trendlines>
<e-trendline :type='type' :accessibility='accessibility'>
</e-trendline>
</e-trendlines>
</e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, TrendlinesDirective, TrendlineDirective, ScatterSeries, Trendlines, LineSeries, Tooltip, Legend } from "@syncfusion/ej2-vue-charts";
let series1 = [];
let 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];
let point1;
let i;
let j = 0;
for (i = 1973; i <= 2013; i++) {
point1 = { x: i, y: yValue[j] };
series1.push(point1);
j++;
}
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective,
"e-trendlines": TrendlinesDirective,
"e-trendline": TrendlineDirective
},
data() {
return {
seriesData: series1,
primaryXAxis: {
title: 'Months'
},
primaryYAxis: {
title: 'Rupees against Dollars',
interval: 5
},
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 }
};
},
provide: {
chart: [ScatterSeries, Trendlines, LineSeries, Tooltip, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom' :legendSettings='legend'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Area' xName='x' yName='y' name='Product X' :border='border' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, AreaSeries, DateTime, Zoom, Legend } from "@syncfusion/ej2-vue-charts";
let series1 = [];
let point1;
let value = 40;
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 seriesData = series1;
const primaryXAxis = {
valueType: 'DateTime'
};
const zoom = {
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 title = 'Sales History of Product X';
const legend = { visible: false };
const border = { width: 0.5, color: '#00bdae' };
const animation = { enable: false };
provide('chart', [AreaSeries, DateTime, Zoom, Legend]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :zoomSettings='zoom' :legendSettings='legend'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Area' xName='x' yName='y' name='Product X' :border='border' :animation='animation'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesDirective, SeriesCollectionDirective, AreaSeries, DateTime, Zoom, Legend } from "@syncfusion/ej2-vue-charts";
let series1 = [];
let point1;
let value = 40;
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);
}
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data() {
return {
seriesData: series1,
primaryXAxis: {
valueType: 'DateTime'
},
zoom: {
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',
legend: { visible: false },
border: { width: 0.5, color: '#00bdae' },
animation: { enable: false }
};
},
provide: {
chart: [AreaSeries, DateTime, Zoom, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators' :legendSettings='legendSettings'
:axes='axes' :axisLabelRender='axisLabelRender'>
<e-series-collection>
<e-series :dataSource='seriesData' :animation='animation' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low' high='high' close='close' open='open' volume='volume'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, CandleSeries, Tooltip, DateTime, Legend, Crosshair, LineSeries, AccumulationDistributionIndicator } from "@syncfusion/ej2-vue-charts";
let series = [
{ 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 }
];
const seriesData= series;
const primaryXAxis = {
title: 'Months',
valueType: 'DateTime',
intervalType: 'Months',
majorGridLines: { width: 0 },
crosshairTooltip: { enable: true }
};
//Initializing Primary Y Axis
const primaryYAxis = {
title: 'Price (Million Dollars)',
minimum: 30,
maximum: 180,
interval: 30
};
const axes = [{
name: 'secondary',
minimum: -7000000000, maximum: 5000000000,
interval: 6000000000,
majorGridLines: { width: 0 },
opposedPosition: true
}];
const animation = { enable: true };
const 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'
}
}];
const legendSettings = {
visible: false
};
const crosshair = { enable: true, lineType: 'Vertical' };
const chartArea = { border: { width: 0 } };
const tooltip = {
enable: true,
shared: true
};
const title = "AAPL - 2016/2017";
provide('chart', [CandleSeries, Tooltip, DateTime, Legend, Crosshair, LineSeries, AccumulationDistributionIndicator]);
const axisLabelRender = (args) => {
if (args.axis.name === 'secondary') {
let value = Number(args.text) / 1000000000;
args.text = String(value) + 'bn';
}
};
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis'
:tooltip='tooltip' :chartArea='chartArea' :crosshair='crosshair' :indicators='indicators' :legendSettings='legendSettings'
:axes='axes' :axisLabelRender='axisLabelRender'>
<e-series-collection>
<e-series :dataSource='seriesData' :animation='animation' type='Candle' xName='x' yName='y' name='Apple Inc' width=2 low='low' high='high' close='close' open='open' volume='volume'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, CandleSeries, Tooltip, DateTime, Legend, Crosshair, LineSeries, AccumulationDistributionIndicator } from "@syncfusion/ej2-vue-charts";
let series = [
{ 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 default {
name: "App",
components: {
'ejs-chart': ChartComponent,
'e-series-collection': SeriesCollectionDirective,
'e-series': SeriesDirective
},
data() {
return {
seriesData: series,
primaryXAxis: {
title: 'Months',
valueType: 'DateTime',
intervalType: 'Months',
majorGridLines: { width: 0 },
crosshairTooltip: { enable: true }
},
//Initializing Primary Y Axis
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
}],
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'
}
}],
legendSettings: {
visible: false
},
crosshair: { enable: true, lineType: 'Vertical' },
chartArea: { border: { width: 0 } },
tooltip: {
enable: true,
shared: true
},
title: "AAPL - 2016/2017"
};
},
provide: {
chart: [CandleSeries, Tooltip, DateTime, Legend, Crosshair, LineSeries, AccumulationDistributionIndicator]
},
methods: {
axisLabelRender: function (args) {
if (args.axis.name === 'secondary') {
let value = Number(args.text) / 1000000000;
args.text = String(value) + 'bn';
}
}
}
};
</script>
<style>
#container {
height: 350px;
}
</style>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.
<template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script setup>
import { provide } from "vue";
import { ChartComponent as EjsChart, SeriesCollectionDirective as ESeriesCollection, SeriesDirective as ESeries, ColumnSeries, Category, Legend } from "@syncfusion/ej2-vue-charts";
const seriesData = [
{ 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 }
];
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'
}
};
const title = "Olympic Medals";
provide('chart', [ColumnSeries, Category, Legend]);
</script>
<style>
#container {
height: 350px;
}
</style><template>
<div id="app">
<ejs-chart id="container" :title='title' :primaryXAxis='primaryXAxis' :primaryYAxis='primaryYAxis' :legendSettings='legendSettings'>
<e-series-collection>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='gold' name='Gold'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='silver' name='Silver'> </e-series>
<e-series :dataSource='seriesData' type='Column' xName='country' yName='bronze' name='Bronze'> </e-series>
</e-series-collection>
</ejs-chart>
</div>
</template>
<script>
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, ColumnSeries, Category, Legend } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-chart": ChartComponent,
"e-series-collection": SeriesCollectionDirective,
"e-series": SeriesDirective
},
data() {
return {
seriesData: [
{ 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 }
],
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
},
legendSettings: {
visible: true,
accessibility: {
accessibilityDescription: 'Legend displaying medal counts by country for Gold, Silver, and Bronze.',
accessibilityRole: 'presentation'
}
},
title: "Olympic Medals"
};
},
provide: {
chart: [ColumnSeries, Category, Legend]
}
};
</script>
<style>
#container {
height: 350px;
}
</style>