CODEWITHSUNDEEP
javacssjavafxbar-chartlinear-gradients
Stefan Warminski
Stefan Warminski

Reputation: 1835

CSS linear-gradient of JavaFX barchart

my current styling pattern is ({0} is replaced with bar specific color code)

  "-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,-30%)) "
+ "(100%, derive(-fx-bar-fill,-40%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,80%)) "
+ "(100%, derive(-fx-bar-fill, 0%)), "
+ "linear (0%,0%) to (0%,100%) "
+ "stops (0%, derive(-fx-bar-fill,30%)) "
+ "(100%, derive(-fx-bar-fill,-10%));"
+ "-fx-background-insets: 0,1,2;"
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;";

This looks like this:

deprecated css styling

The problem is that I get a parser warning because of deprecated linear syntax. I tried to refactor the styling pattern to linear-gradient without changing the result using the guide but I don't get it. Can anyone solve this?

Upvotes: 0

Views: 345

Answers (1)

Stefan Warminski
Stefan Warminski

Reputation: 1835

The deprecated version defines three backgrounds. Each background starts with linear. These backgrounds work like layers. So the only thing I had to do was to create three backgrounds, too. My first solution separeted the backgrounds with ; which leads to a parsing error. The backgrounds have to be separeted by comma. The border of the bars are created by reducing the drawing area using -fx-background-insets. My final solution is

  "-fx-bar-fill: rgb({0});"
+ "-fx-background-color: "
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg1
+ "derive(-fx-bar-fill, -30%), derive(-fx-bar-fill, -40%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg2
+ "derive(-fx-bar-fill, 80%), derive(-fx-bar-fill, 0%)),"
+ "linear-gradient(from 0% 0% to 0% 100%, " // start bg3
+ "derive(-fx-bar-fill, 30%), derive(-fx-bar-fill, -10%));"
+ "-fx-background-insets: 0,1,2;" // reducing drawing area for each bg
+ "-fx-background-radius: 5 5 0 0, 4 4 0 0, 3 3 0 0;"

Upvotes: 1

Related Questions