I've added this JavaScript code on the DonutChartInitialized
const chartPlotOptions = {
'accessibility': {
'description': 'Case Status Chart',
'enabled': 'true',
'keyboardNavigation': {
'seriesNavigation': {
'mode': 'normal',
'rememberPointFocus': 'true'
},
'wrapAround': 'true'
}
'plotOptions': {
'pie': {
'size': '90%',
'innerSize': '80%',
'borderWidth': 3
'legend': {
'enabled': 'true'
};
OutSystems.ChartAPI.Chart.SetProviderConfigs($parameters.ChartWidgetId, JSON.stringify(chartPlotOptions));
but when I tried using the screen reader, It did not read the Legends even though there's aria-label on each legend.I would also like to use Tab button instead of arrow keys to navigate from one legend to another, the same with the series.Attached is the OML
Charts_Examples > Screen1
Hello @Willts
Looking into your code you have added the wrong data type for some of the attributes you used.Mainly all the booleans you're passing as string so it was not working - example here.Replace your code with the following and it should work fine according to my tests:
const chartPlotOptions = { 'accessibility':{ 'description': 'Case Status Chart', 'enabled': true, 'keyboardNavigation': { 'enabled': true, 'seriesNavigation':{ 'mode': 'normal', 'rememberPointFocus': true }, 'wrapAround': true } }, 'plotOptions': { 'pie':{ 'size': '90%', 'innerSize': '80%', 'borderWidth': 3 }, 'legend': { 'enabled': true }, }, 'legend': { 'accessibility': { 'enabled': true, 'keyboardNavigation':{ 'enabled': true } } } }; OutSystems.ChartAPI.Chart.SetProviderConfigs($parameters.ChartWidgetId, JSON.stringify(chartPlotOptions));
Hope it helps!
Cheers,GM
Hi Willts
We have DonutChart_V1(You need to take dependency from outsystem charts),In that Chart we have option like advancedFormat,At that section You able to add your customize js.
I have attached the OML.Please Check.