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 y axis using the opposite:true property. The reversed property causes the x axis to list categories from right to left, hence changing the direction of text to RTL. The code is as follows:

$( '#chart_container' ).highcharts({
  title: {
    text: 'استهلاك الوقود حسب نوع لعام 2012'
  },
  subtitle: {
    text: 'BP :مصدر',
    useHTML: true
    },
xAxis: {
    reversed: true,
     categories: ['زيت', 'غاز طبيعي', 'فحم', 'طاقة نووية', 'الطاقة الكهرومائية', 'قابل للتجديد']
  },
  yAxis: {
    opposite: true,
     title: {
  text: 'مليون طن متري من النفط أي ما يعادل'
    }
  },
  plotOptions: {
    pie: {
      dataLabels: {
        distance: -45,
        color: '#ffffff'
      }
    }
  },
  tooltip: {
    valueSuffix: ' MMT',
    useHTML: true
  },
  series: [{
    name: 'أمريكا',
    type: 'column',
    data: [819.9, 654, 437.4, 183.2, 63.2, 50.7]
  }, {
    name: 'الصين',
    type: 'column',
    data: [483.7, 129.5, 1873.3, 22, 194.8, 31.9]
  }, {
    name: 'الاتحاد الأوروبي',
    type: 'line',
    data: [618.8, 399.7, 293.4, 199.9, 76.1, 97.7]
  }, {
    name: 'مجموع',
    type: 'pie',
    data: [
      {name: 'زيت', y: 1922.4},
      {name: 'طاقة نووية', y: 405.1},
      {name: 'فحم', y: 2604.1},
      {name: 'الطاقة الكهرومائية', y: 334.1},
      {name: 'غاز طبيعي', y: 1183.2},
      {name: 'قابل للتجديد', y: 180.3}
    ],
    size: '80%',
    center: ['20%', '40%']
  }]
});

Note the use of the useHTML property on the tooltip. This enables the tooltip to have proper RTL text when it is styled through CSS using its default class:

.highcharts-tooltip {
  direction: rtl;
}

We also changed the position of the pie series within the chart to ['20%', '40%'] so that it appears left-aligned.

The following screenshot is of the chart resulting from the preceding code: