chart.js v2 "right to left" tooltip (RTL)

Question

I am using chart.js v2.5.0.

My project requirement is that I use tooltips with "right-to-left" direction.

How can I achieve this?

let me clear.. you want doughnut to be generated in counter clockwise direction.. not clock wise..? — Zedex7, May 18 '17 at 06:23
@ZaheerAttar i think OP is asking for the hover labels to be R-to-L and not the chart itself — semuzaboi, May 18 '17 at 06:27
I only want the **tooltip** direction to be RTL, Not the chart. for examle:http://imgur.com/a/ZWFta — DUKEiLL, May 18 '17 at 06:58

score 1 · Answer 1 · answered Oct 29 '19 at 08:21

1

Add this option :

options: { 
tooltips: {
    rtl: true 
  }
}

answered Oct 29 '19 at 08:21

Nader

336
4
12

score 0 · Answer 2 · answered May 18 '17 at 07:05

I don't know how to get a right to left setup of the chart, but you can definitely reformat the tooltip to move around the text in the tooltip. You can reset the text in many different sections of the tooltip, called "beforeBody, beforeLabel, label, afterLabel, and afterBody", where you can put text as you desire. Even with this though, I found that right to left text (hebrew letters) always jump to the far right side of the section. I put together a setup where the color label is in the label section, and the number is in the beforeLabel section. This makes it pretty clear that the number is coming first. If you want the color to go first, you could just flip. I know this isn't an exact solution, it's what I was able to manage given the documentation available.

options: {
  tooltips: {
      callbacks: {
           beforeLabel:function(arr, data){
              var i = arr.index;
              var data1 = data.datasets[arr.datasetIndex];
              return data1.data[i] + ": ";
           },
           label:function(arr, data){
               return data.labels[arr.index];
           }
       }
   }
}

Thank you for your reply and code. However, the text itself is aligned ok. I only want the text in the label to appear **at the left of the colored square**. Please look carefully at the image:http://imgur.com/a/ZWFta — DUKEiLL, May 18 '17 at 09:21
Yes, I understood- I just couldn't figure out a way to do that with the given configuration settings. My guess is that there is a hackier solution that works with the chart.js implementation — fileyfood500, May 18 '17 at 15:21

chart.js v2 "right to left" tooltip (RTL)

2 Answers2