[RGRAPH SUPPORT] Issue with the textAccessible property

Issue with the textAccessible property

Post a reply
Posted by Joachim at 16:48 on 21st February 2021
Hi,
Setting property "textAccessible" gives quite a lot advantages but may cause some problems as well. I wonder if following could be solved: If you are requesting 3d-apearance for bar charts ("variant=3d") then the chart will be displayed with a certain rotation angle. So far so good... But if you then set textAccessible to "true" then the entire canvas will rotated with the same angle as well. Is there a way to avoid this (so that the canvas stays to be displayed horizontally and not rotated)?

Posted by Richard at 17:33 on 21st February 2021
If you're thinking of this:

https://codepen.io/rgraph/pen/xxRXGOV

This shows a canvas (the first) without textAccessible and the one on the right has textAccessible enabled.

This is because when the textAccessible option is enabled the wrapper DIV which goes around the canvas, and contains the text, has to be slanted too, in order for the text to appear correctly.

When textAccessible is off there is no wrapper DIV so nothing has to be slanted.

The text in that case is slanted because of the canvas transformation that is in effect.

You could always wrap the canvas in another DIV tag, of your own, and that would be rectangular. You would need to put some padding on it though to accommodate the slanting:

<div style="width: 650px; height: 250px; border: 1px solid red; padding-top: 35px; padding-bottom: 35px">
    <canvas id="cvs2" width="600" height="250" style="border: 1px solid #ccc">[No canvas support]</canvas>
</div>

Posted by Joachim at 18:21 on 21st February 2021
Hi,
Thanks for your response! Tried your suggestions but w/o success - the canvas only stays rectangular if I specify textAccessible=false - putting the canvas into its own div does not make any difference (besides padding or margin).

Posted by Richard at 18:36 on 21st February 2021
I've updated the example for you:

https://codepen.io/rgraph/pen/xxRXGOV

Posted by Joachim at 18:52 on 21st February 2021
hi,

now I did understand - I had a background image assigned to the canvas and this always is slanted together with the canvas. Now I moved this background to the wrapping div and this (of course) stayes rectangular and everything is fine with or without textAccessible.

Posted by Joachim at 11:00 on 22nd February 2021
hi,

If you use RGraph's responsiveFunction how would you ensure that the canvas always fits into wrapping div if the window is resized? I could not find any clever solution for this.    

Posted by Richard at 11:29 on 22nd February 2021
I'm not 100% certain of what you mean - would the "parentCss" option be what you need?

Or if you wanted to run some code that interrogates the document you could do that with the "callback" option. I've updated the example with some responsive code that shows both:

https://codepen.io/rgraph/pen/xxRXGOV

Posted by Joachim at 12:33 on 22nd February 2021
Hi,

I had to play a bit with padding but more important: "display:inline-block;" did the trick. Now all works perfectly.

Post a reply

What's your name?
What do you want to say?