highcharts dataLabels support RTL with enable hover it for show tooltip

2
votes

I use highcharts, and need to tooltip and dataLabels in pie chart.
I have problem with dataLabels when in RTL direction.

I use this config:

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
            enabled: true,
             style: {
                fontSize: '15px',
                fontFamily: 'tahoma',
                direction: 'rtl',
            },
        },
    },
},

Result has a bug that you can see in this image:

enter image description here

See online: https://jsfiddle.net/NabiKAZ/h4kv0t9v/

As research and suggest official site for RTL mode, I enabled useHTML: true:

enter image description here

Results OK, But data labels is not support mouse hover for show tooltip!

See online: https://jsfiddle.net/NabiKAZ/h4kv0t9v/1/

And I try useHTML: false with remove direction: rtl:

enter image description here

As you see data label show in default LTR mode but is support mouse hover and clickable for show tooltips.

See online: https://jsfiddle.net/NabiKAZ/h4kv0t9v/2/

Sure it's a bug of highcharts and I hope to resolve it by official site.

But now I need data label in RTL mode, and show default tooltip when hover it and also clickable for focus on related data series.
How can I resolve it?!

2
javascripthighchartstooltipright-to-left

2 Answers

1
votes

I find a simple solution.

In this case, just use of a RLE (Start of right-to-left embedding) control character in text of dataLabels.

plotOptions: {
    pie: {
        dataLabels: {
            format: '\u202B' + '{point.name}', // \u202B is RLE char for RTL support

But appears two bug in IE9 and EDGE browsers. for resolve these, doing following solution.

Need this in title for IE9 and EDGE:

title: {
    useHTML: true, //bug fixed `IE9` and `EDGE`

Need disable textShadow of dataLabels for IE9 and EDGE:

plotOptions: {
    pie: {
        dataLabels: {
            style: {
                textShadow: false, //bug fixed IE9 and EDGE

Completed code see in here online: https://jsfiddle.net/NabiKAZ/h4kv0t9v/4/

0
votes

It is possible to add onmouseover and onmouseleave events for each label that will trigger show/hide of Highcharts tooltip. The code can be added in dataLabel format. Example (based on code from your demo): https://jsfiddle.net/1czhyo92/

    format: '<span onmouseover="$(\'#container\').highcharts().tooltip.refresh($(\'#container\').highcharts().series[0].points[{point.x}])" onmouseleave="$(\'#container\').highcharts().tooltip.hide()">{point.name}</span>',