Highcharts does not support rtl be default. When placing rtl texts like hebrew/arabic the text is completely destroyed, making it sometimes unreadable. How do I configure HighCharts to support RTL?
I am using the dotnetHighCharts if it helps...
try this code: Demo
var chart = new Highcharts.Chart({
chart: {
style:{
direction: 'rtl'
},
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: [
' تست a',
'حسن',
'كريم',
'محمود'
],
reversed: true
},
yAxis: {
labels: {
useHTML: true,
format: '{value} متر مربع'
},
title: {
text: 'الاسم الأول',
useHTML: true
},
},
title: {
text: 'تست a',
useHTML: true
},
legend: {
useHTML: true
},
tooltip: {
useHTML: true
},
series: [{
name: 'تست',
data: [10000,30000,20000,40000]
}]});
Just add useHTML: true
to plot options of your chart.
See demo here jsfiddle.net/3me9h7k2
or
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: 'یک نمودار؟!',
useHTML: true, //bug fixed `IE9` and `EDGE`
style: {
fontSize: '20px',
fontFamily: 'tahoma',
direction: 'rtl',
},
},
tooltip: {
useHTML: true,
style: {
fontSize: '20px',
fontFamily: 'tahoma',
direction: 'rtl',
},
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
y: -5, //Optional
format: '\u202B' + '{point.name}', // \u202B is RLE char for RTL support
style: {
fontSize: '15px',
fontFamily: 'tahoma',
textShadow: false, //bug fixed IE9 and EDGE
},
useHTML: true,
},
//showInLegend: true,
},
},
series: [{
name: 'برند',
colorByPoint: true,
data: [{
name: 'اینترنت اکسپلورر؟!',
y: 56.33
}, {
name: 'کروم؟!',
y: 24.03,
}, {
name: 'فایرفکس؟!',
y: 10.38
}, {
name: 'سفاری؟!',
y: 4.77
}, {
name: 'اوپرا؟!',
y: 0.91
}, {
name: 'دیگر؟!',
y: 0.2
}],
}],
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With