Change chart colors for different values [duplicate]

Question

This question already has an answer here:

How to change color of a single bar java fx (1 answer)

Closed 8 years ago.

I want to create temperature chart where I can monitor in real time temperature.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedAreaChart;
import javafx.scene.chart.XYChart;
import javafx.stage.Stage;

public class MainApp extends Application
{

    final NumberAxis xAxis = new NumberAxis(1, 31, 1);
    final NumberAxis yAxis = new NumberAxis();
    final StackedAreaChart<Number, Number> sac
        = new StackedAreaChart<Number, Number>(xAxis, yAxis);

    @Override
    public void start(Stage stage)
    {


        setUserAgentStylesheet(STYLESHEET_CASPIAN);
        stage.setTitle("Area Chart Sample");
        sac.setTitle("Temperature Monitoring (in Degrees C)");
        XYChart.Series<Number, Number> seriesApril
            = new XYChart.Series<Number, Number>();
        seriesApril.setName("April");
        seriesApril.getData().add(new XYChart.Data(1, 4));
        seriesApril.getData().add(new XYChart.Data(3, 10));
        seriesApril.getData().add(new XYChart.Data(6, 15));
        seriesApril.getData().add(new XYChart.Data(9, 8));
        seriesApril.getData().add(new XYChart.Data(12, 5));
        seriesApril.getData().add(new XYChart.Data(15, 18));
        seriesApril.getData().add(new XYChart.Data(18, 15));
        seriesApril.getData().add(new XYChart.Data(21, 13));
        seriesApril.getData().add(new XYChart.Data(24, 19));
        seriesApril.getData().add(new XYChart.Data(27, 21));
        seriesApril.getData().add(new XYChart.Data(30, 21));
        XYChart.Series<Number, Number> seriesMay
            = new XYChart.Series<Number, Number>();
        seriesMay.setName("May");
        seriesMay.getData().add(new XYChart.Data(1, 20));
        seriesMay.getData().add(new XYChart.Data(3, 15));
        seriesMay.getData().add(new XYChart.Data(6, 13));
        seriesMay.getData().add(new XYChart.Data(9, 12));
        seriesMay.getData().add(new XYChart.Data(12, 14));
        seriesMay.getData().add(new XYChart.Data(15, 18));
        seriesMay.getData().add(new XYChart.Data(18, 25));
        seriesMay.getData().add(new XYChart.Data(21, 25));
        seriesMay.getData().add(new XYChart.Data(24, 23));
        seriesMay.getData().add(new XYChart.Data(27, 26));
        seriesMay.getData().add(new XYChart.Data(31, 26));
        Scene scene = new Scene(sac, 800, 600);
        sac.getData().addAll(seriesApril);
        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args)
    {
        launch(args);
    }
}

I want to change the color of of the chart for height temperature. For example I want to see temperature between 10 and 20 in green and temperature between 40 and 50 in red. Can you hep me to implement this?

Answer 1

This is only possible with CSS.
Add the following lines to your CSS and give your chart the id temperatureChart.

#temperatureChart .series0.chart-series-area-fill {
    -fx-fill: linear-gradient(to top, #0984df, #00d8ff 20%, #fff000 60%, #ff0000) ;
}

The right percent values you must figure out yourself.

Hope this helps,
Kalasch

EDIT(in code method):
To do this in Code, you can do the following(it is suggested that you check if the lookup is null):

sac.lookup("#temperatureChart .series0.chart-series-area-fill")
.setStyle("-fx-fill: linear-gradient(to top, #0984df, #00d8ff 20%, #fff000 60%, #ff0000);");

It is not recomended to do so, but if there is no other way...