Accepted answer

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' + '{}', // \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:


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):

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

Related Query

More Query from same tag