Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
[vaadin charts] axis text rotation
After upgrading to vaadin-charts-3.1.0-rc1, text roation has stopped working.
When look at the current vaadin-charts demo (as of 25Jun16) here: http://demo.vaadin.com/charts/#ColumnWithRotatedLabels
The css style info shows this for one of th rotated axis elements:
<text x="440.0641293851417" style="color:#808080;cursor:default;font-size:13px;font-weight:normal;font-family:Verdana, sans-serif;fill:#808080;width:400px;text-overflow:ellipsis;" text-anchor="end" transform="translate(0,0) rotate(-45 440.0641293851417 317)" y="317" opacity="1">
But when I run a chart with the same axis settings, my css for the type of element doesn't include the tranform settings:
<text x="401.80735358872744" y="101" text-anchor="end" style="color:#444444;cursor:default;font-size:11px;font-weight:normal;font-family:Verdana, sans-serif;fill:#444444;" opacity="1"> <tspan x="401.80735358872744">21. Jun</tspan> </text>
Of course I don't know the version the vaadin demo is running. I've tried v3.0.0 but it is the same (only with other non-related errors).
Is there a special set of dependencies (e.g. an updated phantomjs or other extenral lib) that is required for vaadin charts 3.1 to rotate labels correctly?
I checked and current demo is using vaadin-charts-3.1.0-rc1. The rotation should work in your case too.
Could you attach a code snippet with the creation of the chart that doesnt work in your case? Also mention the vaadin version you're using. With that I can try to reproduce it.
Thanks for your reply. I got it working now - it was a case of cached widgetsets.
Once I cleared the old widgetset and got the new v3.1 in from scratch it is working.
Apologies, I updated a ticket I created, and forgot to update this post!
The new charts look really good!
Great to hear it's working now!