2

I tried using the Charts module with Highcharts as my charting library (engine). And this for a block view in a multilingual site that flips between LTR and RTL.

I found out that the legends and tooltips break in RTL. The legends labels overlap the colored boxes and the text within the labels is pushed outside of the tooltip box.

I managed to make the tooltips presentable through the use of $chart['#tooltips_use_html'] = TRUE; (in 'chart_alter'). Although the text is aligned wrongly the out of box issue disappeared.

However I found no similar option for the legend. I looked at the Highcharts documentation where I found a useHTML option for fixing this issue with legends. But I am unsure about how to apply it with the hooks provided by the Charts module.

Here is a picture of it:

enter image description here

2

You should be able to get this to work using the approach as described in the issue about Pass library-specific options via existing #raw_options, AFTER you apply the patch in comment nr 4 of this issue.

Disclosure: I'm a (co-)maintainer of this module.

PS 1: Would be nice/great if you could confirm that this patch also worked for you.

PS 2: after a similar patch becomes available to Google charts also, both patches will be committed.

  • I tried applying the patch but couldn't since I was running the latest dev version. I checked the code and found most of the modifications already included. I recognized you because I was browsing the issues yesterday for similar stuff. Thanks. – Jed_BH Dec 6 '15 at 10:37
  • So you got it to work, great! Would you mind sharing some more details about it please? E.g. by adding some type of comment in that issue I quoted (as an extra confirmation about RTBC). And also indicating in that issue that you don't need the patch if you use the current DEV version? Those kinds of feedback are always greatly appreciated (it's not always obvious to get such kind of confirmations, aka approvals for moving forward). – Pierre.Vriens Dec 6 '15 at 10:40
  • Yeah sure. I also created an issue for this on drupal.org, should I update that or delete it? I actually wanted to post code and a picture on here but unsure about how to do that in comments. There seems to be no options for it. – Jed_BH Dec 6 '15 at 10:44
  • No please do NOT delete that issue on D.O., it's a valid issue! I only saw it earlier today there. If you want, create a "relationship" from your issue to that raw_options issue. So that we can use your issue as another use case (sample of how to use the raw options). If you want to share the code, please do so in the issue. I'd be happy to copy-and-pase it to around here also later on if you want me to do so (if you don't know how to do that around here). OK? – Pierre.Vriens Dec 6 '15 at 10:47
1

Thanks to the help of Pierre.Vriens, here are the lines of code I used in a custom module to adjust Highcharts for display on localized RTL pages:

function hook_chart_alter(&$chart, $chart_id) {
  $chart['#tooltips_use_html'] = TRUE;

  global $language;

  if ($language->name == 'Arabic') {
      $chart['#raw_options'] = array(
        'labels' => array(
            'useHTML' => True
          ),
        'legend' => array(
            'useHTML' => True,
            'rtl' => True
          )
        );

      if($chart['#legend_position'] === 'left'){
        $chart['#legend_position'] = 'right';
      }

      if(isset($chart['yaxis'])){
        $chart['yaxis']['#opposite'] = TRUE;
      }    
  }
}

This fixes almost everything, except the tooltips text alignment and the legend title positioning. Both persist to stay aligned to the left as shown here in the cropped chart to the right: Pie Chart Highcharts RTL Arabic

I found no options in Highcharts documentation for adjusting the legend title, so I settled for omitting it as shown to the left. As for the tooltip text misalignment, I managed to rectify it easily by adding the following CSS to Theme.styles-rtl.css:

.highcharts-container {
    text-align: right !important;
}

Another image of a column/line chart in RTL and LTR just because: localized column/line charts combination

  • Well done, chapeau (= heads off!) ... And thanks for sharing it ... Too bad I can only upvote it once ... Wish there were more people like you who "contribute back" such kind of samples ... – Pierre.Vriens Dec 10 '15 at 7:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.