Displaying Farsi legend and tooltip of highchart in Farsi moodle page correctly

Question

I use Highchart in my Farsi(Persian) Moodle site. When i use this chart in a Farsi page, it's legend and tooltip were show badly like an image in this link:

use Highchart in Farsi Moodle page with Farsi data

What i must do??

When i use Highchart with same data in English Moodle site, the chart was show as: use Highchart in English Moodle page with Farsi data

part of my code that i call highchart is like this:

    <div id="container0" style="min-width: 400px;
                            height: 400px; 
                            margin: 0 auto;
                            margin-top: 2em" align="center">
</div>

my highchart code:

 Highcharts.setOptions({ colors: color_items_array});
         var chart;
         $(document).ready(function() {

              chart = new Highcharts.Chart({
                chart: {
                    renderTo: conta,
                    type: type,
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: X_title,
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: student_names2
                },
                yAxis: {
                    title: {
                        text: Y_title
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#080808'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },

                series: seris_column2
            });
        });