alex alex - 1 month ago 20
CSS Question

How to change point size in Scatter Chart?

I have this

ScatterChart
made in JavaFX:
Bifurcation diagram
How can I set the data points size?

I found that it should be done in CSS, but even having the docs, I still cannot figure it out.

Answer

Use

.chart-symbol {
    -fx-background-radius: 10px ;
    -fx-padding: 10px ;
}

If you need this to apply just to a specific chart, give the chart an id and use the id in the CSS file:

chart.setId("bifurcation-diagram");
#bifurcation-diagram .chart-symbol {
    -fx-background-radius: 10px ;
    -fx-padding: 10px ;
}

SSCCE:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.stage.Stage;

public class ScatterChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {

        ScatterChart<Number, Number> chart = new ScatterChart<>(new NumberAxis(), new NumberAxis());

        chart.setId("bifurcation-diagram");

        Series<Number, Number> series = new Series<>();
        chart.getData().add(series);

        for (int i = 0 ; i <= 100; i++) {
            double lambda = 4.0 * i / 100 ;
            double x = 0.5 ;
            for (int j = 0 ; j < 100 ; j++) {
                x = lambda * x * (1-x);
            }
            for (int j = 0 ; j < 50; j++) {
                series.getData().add(new Data<>(lambda, x));
                x = lambda * x * (1-x);
            }
        }

        Scene scene = new Scene(chart, 1200, 800);
        scene.getStylesheets().add("bifurcation.css");
        primaryStage.setScene(scene);
        primaryStage.show();

    }

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

bifurcation.css:

#bifurcation-diagram .chart-symbol {
    -fx-background-radius: 10px ;
    -fx-padding: 10px ;
}

enter image description here

If you want smaller points, this doesn't seem to work well (I assume because they are not compatible with the default node generated for the chart data). In this case you might need to set the node for the data as well:

for (int i = 0 ; i <= 400; i++) {
    double lambda = 1.0 * i / 100 ;
    double x = 0.5 ;
    for (int j = 0 ; j < 100 ; j++) {
        x = lambda * x * (1-x);
    }
    for (int j = 0 ; j < 50; j++) {
        Data<Number, Number> data = new Data<>(lambda, x);
        Region plotpoint = new Region();
        plotpoint.setShape(new Circle(0.5));
        data.setNode(plotpoint);
        series.getData().add(data);
        x = lambda * x * (1-x);
    }
}

and the CSS

#bifurcation-diagram .chart-symbol {
    -fx-background-radius: 0;
    -fx-padding: 1px ;
}

enter image description here