Правильное отображение легенды фарси и всплывающей подсказки на старшей странице фарси

Я использую Highchart на своем фарси (персидском) сайте Moodle. Когда я использую этот график на странице фарси, его легенда и всплывающая подсказка были плохо показаны, как изображение в этой ссылке:

использовать Highchart на странице фарси Moodle с данными фарси

Что я должен сделать??

Когда я использую Highchart с теми же данными на английском сайте Moodle, диаграмма была показана как:
использовать Highchart на английском Moodle страницу с данными фарси

часть моего кода, которую я называю highchart, выглядит так:

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

мой код старшей диаграммы:

 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
});
});