Vaadin Charts 6 - Dynamic Colors

Flow
1

We are currently migrating parts of our software to Vaadin 10 and therefore use the newest Vaadin Charts version.
Unfortunately, we used the setColor()-methods of series and items a lot because we change colors dynamically.
Since all styling should now be done per CSS, which would not be dynamic, is there any other way to simulate the behaviour of the old setColor()-methods to define the color of a point at runtime?

2

Hi Leonardo, thanks the question!

It is indeed possible to change colors dynamically with CSS. Since we are now using CSS we can better leverage the power and flexibility of the browser. Vaadin Charts supports up to 10 --vaadin-charts-color-{n} CSS variables (where n goes from 0 to 9) which we can take advantage of to color the nth series in a chart. To color the second series for example, you can set --vaadin-charts-color-1 in a scope encompassing the chart.

Here is a demo I made for that: https://github.com/oluwasayo/chart-theming-demo

  • Clone the project
  • Checkout the dynamic-chart-styling branch
  • Run mvn jetty:run
  • Click as many times as possible on the chart and watch it change the colors of series randomly

Please let me know if this addresses your use case.

3

Hi Sayo,

I’m a colleague of Leonardo.

Sadly this does not address our use case. We need to not only style a whole series dynamically, but also items, plotlines, plotbands etc.

How can I do that?

4

Hi Bennet,

It is still possible to style each of these items dynamically although it is more complex than simply setting the styling properties as you would have done in the older versions of Charts.

A way to approach this with the current Charts version would be to create a theme exposing all your stylable items to CSS variables and setting those variables. That should take you far enough depending on how much flexibility you require (e.g do you want to be able to style all legend items or single out a specific legend item for styling?)

If the approach described above does not suffice, please create an issue on [Vaadin Charts Flow]
(https://github.com/vaadin/vaadin-charts-flow/issues/new) describing your use case in more detail (specific samples would be nice).

5

We also need to dynamically change chart-item colors. Please bring the setColor() back in Vaadin Flow!