Configuring our charts for internationalization

Highcharts can display bidirectional text using SVG capabilities of major modern browsers. However, issues can arise when displaying complex HTML strings in SVG. Therefore, all the text options in Highcharts are accompanied by the useHTML property, used extensively in this book.

Along with displaying bidirectional text, it's also essential to flip the position of the y axis and change the flow of the x axis so that the categories appear from right to left. For this purpose, Highcharts provides properties on both axes, namely xAxis.reversed and yAxis.opposite, which can change the geometry of the chart.

We will continue with the following example to replace English text with Arabic text and change the position and flow of both axes. To translate the text into Arabic, we will use Google Translate (https://translate.google.com).

Observe the following code for chart initialization; we will replace the text with Arabic and change the position of the...