Highcharts tooltips does not right to left as long as useHTML is equal to true

Question

Please consider this code:

var chart = new Highcharts.Chart({
             chart: {
                        renderTo: 'container',
                        type: 'column'
                    },
             xAxis: {
                         categories: [
                                       'عطه', 
                                       'أديب', 
                                       'فرحان', 
                                       'حسن', 
                                       'كريم', 
                                       'محمود'
                                     ],
                         reversed: true
                     },
             title: {
                         text: 'بعض الأسماء الشعبية الأولى',
                         useHTML: Highcharts.hasBidiBug
                    },  
             tooltip: {
                         useHTML: true
                      },
             series: [{
                         name: 'ذكر أسماء',
                         data: [10000,20000,30000,20000,60000,5000]
                     }]
           });

Fiddle: Right To Left Tooltip

The chart tooltip is not displayed correctly. for example: ذکر الاسما: 00060 for 60000 value. How I can fix this problem?

Thanks

Answer 1

You can use a tooltip formatter like this

tooltip: {
    useHTML: true,
    formatter:function(){
        return '<span style="color:'+this.color+'"></span> '+this.key+' : <b class="ltr">'+ this.y + '</b><br/>'
    }
},

Fiddle