C# – HighCharts to support RTL

cdotnethighchartshighchartsright-to-left

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…

Best Answer

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]

}]});

Related Solutions

Javascript – YUI support of rtl languages

There is no support for RTL languages in YUI 2.x. I filed a bug about it over a year ago and got a response saying they might add it in a later release. (I can no longer find the bug since they switched to their new tracker, sorry.) Hopefully they're adding RTL support for YUI 3.x, but I haven't checked out the preview releases (nor can I find them mentioning adding RTL support).

That's not to say YUI menus cannot do RTL, though it takes a bit of work as there's no built-in support. I make no claims that this works 100% in all browsers, especially not IE.

First, you need the menu items to flow the opposite direction, and start on the opposite side of the page. I believe this works in most browsers (except IE6, of course, argh - for that browser, you need to do some extra work which I don't remember the answer to):

.yuimenubaritem { float: right; }

Second, you need the submenus of the MenuBar to flow the opposite direction. You can do this by changing the submenualignment attribute of your Menus' configurations:

// For the main submenu
new YAHOO.widget.MenuBar("id", { submenualignment: ["tr","br"] });

// You have to manually add all the Menus,
// so that you can set the submenualignment on each.
new YAHOO.widget.Menu("id", { submenualignment: ["tl","tr"] });

The worst part is trying to get the keyboard events to work correctly, as at this point pressing right makes the cursor go left and vice-versa. To do that, you'll have to hijack MenuBar's _onKeyDown() and change it so that, if the MenuBar is set RTL (store this info in a var somewhere), it processes left/right a bit differently. (Sorry, you'll have to figure this one out on your own, but it should be a simple matter of switching cases on key presses).

WordPress and RTL

WordPress's back end can handle Arabic just fine, with both the editor and the database itself. If you want the front end to display in Arabic you'll need to use/develop a theme that uses Arabic.

If your blog is Arabic-only, you can add a CSS class to the div surrounding the post in the blog template file that sets the text-direction to ltr. If you use Arabic and English, you can set an if statement to decide what direction each post needs to be based on a custom field you add to the post from the back end.

Best Answer

Related Solutions

Javascript – YUI support of rtl languages

WordPress and RTL

Related Topic