Search code examples
javascripthighchartstooltipright-to-left

highcharts dataLabels support RTL with enable hover it for show tooltip

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?!

Solution

  • 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/