I am trying to style Charts dynamically. This includes styling a series as a whole but also single items, plotlines and plotbands.
Sadly this is not so easy in Vaadin 10 as many methods for styling, like setColor(), setDashStyle() and many others, have been removed.
My current approach to this is to add a classname to every element i need to style and adding the required CSS styles to a <style>. This is then added as a sibling to the chart like this:
This currently works in Firefox since they don’t support Shadow-DOM yet. This will change when they release Firefox v63 on 23rd of October this year.
This doesn’t work in browsers which support Shadow-DOM e.g. Chrome. My current solution for browsers supporting Shadow-DOM is to move the aforementioned <style> via javascript into the Light-DOM of the Vaadin-Chart which would look like this:
This is the command used to do this:
UI.getCurrent().getPage().executeJavaScript("document.getElementById(\"" + the-chart-id-goes-here + "\").getElementsByTagName(\"vaadin-chart\")[0]
.shadowRoot.appendChild(document.getElementById(\"" + the-style-id-goes-here + "\"))" );
I made a little [demo]
(https://github.com/BL-AMC/Vaadin-Charts-dynamic-styling) showcasing a stripped down version of my current solution.
To run, just clone the project and run mvn jetty:run
Although it works it isn’t an elegant solution. A better word might be ugly.
Is there any different way to style Vaadin-Charts dynamically? (using a mixin which exposes all my stylable items to CSS-variables is not sufficient as it would not allow me to style single items.)