My FXML file contains a JavaFX AreaChart
<AreaChart id="myAreaChart"
onMouseClicked="#handleAreaChartMouseClicked"
GridPane.columnIndex="0"
GridPane.rowIndex="0"
fx:id="myAreaChart" >
<xAxis>
<NumberAxis>
</NumberAxis>
</xAxis>
<yAxis>
<NumberAxis></NumberAxis>
</yAxis>
</AreaChart>
The chart is styled using css loaded from css\myAreaChartStyle.css in the start method
...
@Override
public void start(Stage primaryStage) throws Exception{
Parent root = FXMLLoader.load(getClass().getResource("sample.fxml"));
primaryStage.setTitle("Hello World");
Scene cur = new Scene(root, 300, 275);
cur.getStylesheets().addAll(Main.class.getResource
("css\\myAreaChartStyle.css").toExternalForm());
...
The styling works and the chart has 3 areas with specific styles applied
.default-color0.chart-area-symbol { -fx-background-color: #0000ff; }
.default-color0.chart-series-area-fill { -fx-fill: #0000ff; }
.default-color0.chart-series-area-line { -fx-fill: #0000ff; }
.default-color1.chart-area-symbol { -fx-background-color: #0000ff; }
.default-color1.chart-series-area-fill { -fx-fill: #0000ff; }
.default-color1.chart-series-area-line { -fx-fill: #0000ff; }
.default-color2.chart-area-symbol { -fx-background-color: #0000ff; }
.default-color2.chart-series-area-fill { -fx-fill: #0000ff; }
.default-color2.chart-series-area-line { -fx-fill: #0000ff; }
My question pertains to animating the chart. I want to create a smooth transition where the colors of the areas change gradually from blue to white. I attempted to update the css styling from my Controller class but it didn't achieve the desired effect. How can I implement animation for my chart?