How to change dashs style in Vaadin 14 graphs? - vaadin-flow

Question

In Vaadin 14, I'm trying to determine how to change the graph's line style from solid to dashed? (I need to do this programatically.) At first, it seemed trivial (based on https://vaadin.com/blog/styling-your-vaadin-charts), but I do not see API for either color setting (eg
PlotOptionsLine redBirdOptions = new PlotOptionsLine();
redBirdOptions.setColor(new SolidColor("#d62031"));
) or dash-style setting available in Vaadin 14. Anyone have examples on how one can programmatically set the dash style (and color) of series in a Vaadin 14 line graph?

Answer 1

Disclaimer: There is no way to do it Java only. You would need to style chart using CSS. Though, the color can be changed via styles settings in Java like shown here Treemap custom colors, I will follow the CSS approach below
The documentation you are referring to is for Vaadin 8, which uses another version of the highcharts library. In Vaadin 14, you need to configure settings via css. There is no example especially for your use case, but you can find in the links below all the needed info :
CSS file configuration and correct import annotation CSS Styling
Class names that can be used to style charts Highcharts API
The color is set using .highcharts-color-{n} class (or the --vaadin-charts-color-{n} property, which is preferred here), where n can be defined for options on Java side like this : plotOptions.setColorIndex(2);. A highchart example for colors can be found here : CSS Colors
For dashed css you could check this : CSS dashstyle.
Overall, this should do the trick:
Create a chartStyles.css file
Put the content below there :
:host {
--vaadin-charts-color-2: red;
}
.highcharts-series-0 {
stroke-dasharray: 1, 3;
}
Import the style using :
#CssImport(value = "./styles/chartStyles.css", themeFor = "vaadin-chart", include = "vaadin-chart-default-theme")
Plot options have colorIndex of 2 (as this is the value in css we are referring to):
PlotOptionsAreasplinerange range=new PlotOptionsAreasplinerange();
range.setColorIndex(2);
dataSeries.setPlotOptions(range);
After that the chart color should change. You can skip the index assignment and use --vaadin-charts-color-0, if you have only one chart on the page. If not, I would suggest to add theme names to the chart and adjust css file to use them. This way you would ensure that only the chart you want is affected.