Tooltip on Bar stack chart

[Shwetanana]

Hi Sebastian.,
Thanks for replying back.

I solved this issue.

I am facing another issue related to tooltip in Gauge chart. Everything is working fine but when we are changing it to rtl then tooltip on gauge is not rendering.
Can you please suggest what I am missing. I am trying it in Arabic and Hebrew , tooltip is not rendering while its working fine in ltr.

tooltip: {
useHTML: true,
followPointer: false,
shadow: true,
borderWidth: 0,
backgroundColor: "#FFFFFF",
style: {
color: "#323130",
direction: direction,
},
distance: 95,
outside: true,

formatter: function (this: any) {

return createChartTooltip( this.y, totalCount);
},
},

[sebastian.h]

Hi,
Thanks for another question.

I created an example, could you replicate your problem inside?
https://jsfiddle.net/BlackLabel/bz68w5gc/

Best regards.

[Shwetanana]

Hi Sebastian,

We are using scrollbar using highstock , but we want to make it scrollable with mouse slider. Please suggest.
scrollbar: {
height: 4,
barBackgroundColor: "#979593",
rifleColor: "#979593",
barBorderRadius: 4,
trackBorderRadius: 4,
enabled: seriesData.length > 10 ? true : false,
},

[sebastian.h]

Hi,
Probably you are looking at talking about the mouse wheel.

We don't have such functionality as mouse wheel control but you can check solution from this topic.
viewtopic.php?t=40633#p141054

Live demo:
https://jsfiddle.net/BlackLabel/aod45k1f/

Let me know how are you going with this.
Best regards.

[Shwetanana]

Thanks Sebastian.

Related to Accessibility , is there any way to use keyboard tab/ accessibility for each individual bar or column in highcharts.

[sebastian.h]

Hi,

Options inside accessibility.keyboardNavigation should help, try to set order to series.

According to the documentation:

..Order of tab navigation in the chart. Determines which elements are tabbed to first.

API References:
https://api.highcharts.com/highcharts/a ... tion.order

let me know if this is what you're looking for.
Best regards.

[Shwetanana]

And how to use screen-reader for each bar/column in chart ? What are the features available in highchart by which screen reader can read the actual data in the chart?

[sebastian.h]

Hi,
Thanks for another question.

I recommending read these articles describe how accessibility module works:
https://www.highcharts.com/docs/accessi ... ity-module
https://www.highcharts.com/docs/accessi ... ity-module

Regards.

[Shwetanana]

Thanks Sebastian,

I tried the above solution but its still not working for the keyboard navigation. Please suggest.

[sebastian.h]

Hi,
Please show me your demo I will test them.

Regards.

[Shwetanana]

Hi Sebastian,
Below for the column chart.

var newChartOptions = {
chart: {
type: 'column',
height: 300,
},

title: {
text: ''
},

accessibility: {
enabled:true,
keyboardNavigation: {
enabled: true,
order: ['series', 'legend','chartMenu']
}

},

plotOptions: {
series: {
color: '#418DED',
pointPadding: 0.2,
borderRadius: 2,
pointWidth: 24,
states: {
inactive: {
opacity: 1
}
},
accessibility: {
enabled: true,
keyboardNavigation: {
enabled: true
}

}
},

column: {
stacking: 'normal',

dataLabels: {
enabled: false
},
accessibility:{
enabled:true,
keyboardNavigation:{
enabled:true,
}

},

states: {
hover: {
enabled: false,
lineWidth: 0,
lineWidthPlus: 0,
halo: {
size: 0,
}
}
},
},

followPointer: false,
backgroundColor: "black",
borderWidth: 0,
},

yAxis: {
accessibility:{
description: "YAxis",
enabled: true,
},
min: 0,
max: dateYMax,
opposite: this.isRTL,
tickWidth: 1,
gridLineDashStyle: 'ShortDash',
title: {
text: 'text',
enabled: true,
align: 'middle',
textAlign: 'center',
margin: 15,
style: {
color: "#323130",
fontFamily: "Segoe UI",
fontSize: 12,
lineHeight: 20,
fontWeight: 600,
}
},
labels: {
useHTML: true,
format: '<div class="yaxis-label">{value}%</div>',
},

},

xAxis: {
categories: categoriesArray,
reversed: this.isRTL,
max: dataLength > 10 ? 9 : seriesData.length - 1,
accessibility:{
description: "XAxis",
enabled: true,
},

scrollbar: {
height: 4,
barBackgroundColor: "#979593",
rifleColor: "#979593",
barBorderRadius: 4,
trackBorderRadius: 4,
enabled: seriesData.length > 10 ? true : false,
},
title: {
text: 'xAxisLabel',
enabled: true,
align: 'middle',
textAlign: 'center',
margin: 18,
style: {
color: "#323130",
fontFamily: "Segoe UI",
fontSize: 12,
lineHeight: 20,
fontWeight: 600,
}
},
labels: {
rotation: 0,
useHTML: true,
}


},
series: [{
data: seriesData,
name: this.props.SeriesNameAriaLabel,
minPointLength: 2,
accessibility: {
enabled: true,
description:"series",
pointDescriptionFormatter: this.getPointDescription,
seriesDescriptionFormatter: function (series: any) {
return series.name;
},
keyboardNavigation: {
enabled: true,
focusBorder: {
style: {
lineWidth: 1,
color: '#F0C781'
}
}
}
},
}],

tooltip: {
followPointer: false,
shadow: true,
backgroundColor: "#FFFFFF",
borderWidth: 0,
outside: true,
style: {
color: "#323130",
whiteSpace: "pre-wrap",
width: 175,
},

formatter: function (this: any) {

return createChartTooltipDateChart(this.x, this.y, totalCount);
},
},

credits: {
enabled: false,
},

lang: {
accessibility: {
enabled:true,
chartContainerLabel: this.props.ChartAriaLabel,
svgContainerTitle: this.props.DisplayChartLabel,
legend: {
legendLabel: '',
legendItem: 'Legend {itemName}',
},
defaultChartTitle: '',
}
},

legend: getLegendOptions(false, this.props.LegendOptions),

[Shwetanana]

Hi Sebastian,

Is there some particular key we need to use for keyboard navigation in chrome and edge?

Thanks
Shwetanana

[sebastian.h]

Hi,

Unfortunately, I can't replicate your case but I checked an example from our blog where key navigation works correctly.
Could you have a look and test in your environment?

Live demo:
https://jsfiddle.net/BlackLabel/jb4h5e8q/

https://www.highcharts.com/blog/accessi ... reFeatures

At the macOS voiceOver tool, I navigate using the arrow keys and the shift ctrl option shortcuts.

Regards.

[Shwetanana]

Hi Sebastian,

Is there any limitations of Highcharts with respect to narrator for microsoft edge? Narrator is working fine for chrome but for edge it can read only first bar and even after focus is going on second bar but then also its not reading its value.

Please suggest.

Thanks
Shwetanana

[sebastian.h]

Hi Shwetanana,

There is no limitation for any browsers, but browsers have their own environment and maybe something doesn't work together.

You can report this at GitHub with explanation and example for tests.
https://github.com/highcharts/highchart ... new/choose

Best regards.