Fix broken charts styling examples, add Flow API example

[HerbertsVaadin]

Solves:
#4782
#76 (sort of)

Changes:

• Rewrote CSS Styling example to work and match V24 approach.
• Created a new example about styling through Java API
• Renamed Tab to "Chart Styling" instead of "CSS Styling"
• Rewrote second CSS example, as it was not working.
• Included in the examples the changing of the series / line colors as well.

[github-actions]

AI Language Review

The key change in the modified file is the addition of examples for styling with Java API to the "Chart Styling" documentation, along with updates to the CSS styling examples to include more styling features such as outline colors and line colors. However, these updates didn't introduce any issues that require correction or improvement. Therefore, no further action is needed at this time.

[peholmst]

This PR is targeted at Vaadin 24. Does it apply to Vaadin 25 as well?

[rolfsmeds]

This PR is targeted at Vaadin 24. Does it apply to Vaadin 25 as well?

Yes, it's equally applicable to V25. However, in the V25 docs, we need to mention that you need to enable shadow DOM style injection to use it. There is a note in the V25 Styling section about that: https://github.com/vaadin/docs/blob/main/articles/styling/index.adoc

[rolfsmeds]

More of a question than a request to change... otherwise looks good to me.
Would be great to port to V25 docs (where it also needs to be noted that component shadow DOM css styling needs to be enabled)

[rolfsmeds]

Isn't the only problem with this example that the css snippet is wrong (in that it needs to be applied to components/vaadin-chart.css?

[HerbertsVaadin]

I've rechecked it now,
it also didn't include:
configuration.getChart().setStyledMode(true);

Should I restore it and modernize it?

[rolfsmeds]

Well, we don't seem to have any other guidance for applying classnames to chart elements, so I think it would be good to retain it.

[HerbertsVaadin]

@rolfsmeds , I refactored the old example to this.