CODEWITHSUNDEEP
javacssjavafxplotscatter-plot
alex
alex

Reputation: 11400

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.

Upvotes: 2

Views: 3775

Answers (2)

James_D
James_D

Reputation: 209358

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

Upvotes: 6

Maciej Dobrowolski
Maciej Dobrowolski

Reputation: 12122

If you want to increase the size of all points, you can simply use following CSS:

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

By the way, this is an example from JavaFX: Working with JavaFX UI Components (scatter chart section):

.default-color5.chart-symbol {
    -fx-background-color: #860061, white;
    -fx-background-insets: 0, 2;
    -fx-background-radius: 5px;
    -fx-padding: 5px;
}

It makes a fifth series symbol a hollow circle. Please see the relation between .default-color<x> in this stylesheet and CSS Reference Guide mentioned below - it's really easy.

More detailed info can be found at JavaFX CSS Reference Guide in Scatter Chart section.

Upvotes: 0

Related Questions