Support for right-to-left languages

amCharts 4 has supports RTL (right-to-left) language support out-of-the-box. This article will explain how to turn it on, what it does, and other related topics.

Enabling

Enabling RTL is as simple as setting rtl = true on your chart object.

TypeScript

chart.rtl = true;

JavaScript

chart.rtl = true;

JSON

{  // ...  "rtl": true}

Labels

In a nutshell, setting rtl = true has effect only on textual labels. It does not affect layout elements. This is covered in the next section.

Mixed content labels

When your chart has RTL enabled, its labels will have special instructions attached to their elements so that browser’s draws them in a special way.

Let’s take this label definition (used for a Pie Chart Slice):

"[bold]فاكهة[/]\n{category}: {value.percent.formatNumber('#.#')}%"

When browser rendering engine encounters RTL text withing regular text, a pretty weird fuzzy logic kicks in, resulting in labels, that are formatted in definitely not right way:

Incorrect result ( rtl = false )

Enablig RTL fixes it by setting proper label attributes, so that order and alignment of the text is how you would expect it:

Correct result ( rtl = true )

Gotchas

Numbers

As we can see from the above screenshots, enabling RTL reverses order of blocks, including putting the "%" sign to the other side of the number.

This is true for the mixed-language content only.

If our labels would contain only Latin (letf-to-right) text or numbers/symbols, it would remain as is: rtl setting would have no effect over it.

For labels with just numbers and symbols rtl setting is ignored

Formatting blocks

Another thing that does not respect rtl setting is inline formatting block syntax.

One might expect for the RTL label the opening and closing blocks to work from right to left to right as well, e.g. ... [/]xxxxx[bold] ..., e.g. the “xxxxx” to be bold.

That is not how it works. The formatting block (i.e. [bold]) always affects text to the right of it, until it encounters closing block ([/]).

So, the correct usage is: ... [bold]xxxxx[/] ....

Legend

By default, Legend is not affected by the rtl setting. However, for RTL languages, reversing order of legend items as well as items within single legend entry (marker to the right, then label, then value) might seem more natural.

Luckily this is easy to do as well: for that we have a universal reverseOrder setting.

Flipping entry elements

Each legend entry is a Container with a “horizontal” layout. All we have to do to reverse the order of its elements, is to set reverseOrder of the template for the legend item containers:

TypeScript

chart.legend.itemContainers.template.reverseOrder = true;

JavaScript

chart.legend.itemContainers.template.reverseOrder = true;

JSON

{  // ...  "legend": {    // ...    "itemContainers": {      "reverseOrder": true    }  }}

• 
• 

Changing item order

We might also want to change the order of the items in legend, so that first item starts on the right.

For that we can simple use the reverseOrder on the legend itself.

TypeScript

chart.legend.reverseOrder = true;

JavaScript

chart.legend.reverseOrder = true;

JSON

{  // ...  "legend": {    // ...    "reverseOrder": true  }}

Full example

Open in CodePen