CODEWITHSUNDEEP
javafx
Simon Perkins
Simon Perkins

Reputation: 139

How do I change the size of a chart symbol in a javafx scatter chart?

I can change the symbol shape, colour, padding, radius but I can't seem to find a CSS item that will change the size of the symbol.

I had thought that if I recreated the symbol with smaller SVG path, that might be a way to do it, but it appears that my smaller shape just gets scaled up anyway.

I need smaller symbols but so far have not found a way to scale them.

Upvotes: 0

Views: 4126

Answers (2)

user7788157
user7788157

Reputation: 11

This is how I created a rectangle in SVG path then changed the size in css.

.chart-symbol{
    -fx-shape: "M 20.0 20.0  v24.0 h 10.0  v-24   Z";
    -fx-padding: 7px 7px 7px 7px;
}

Upvotes: 1

BadVegan
BadVegan

Reputation: 494

Here is the code, and the loop where you can find all symbols and change Width and Height. I know only this way. If you try this in CSS you will change also legend under chart.

public class Chart extends Application {

  @Override 
  public void start(Stage stage) {

    //set Axis
    final NumberAxis xAxis = new NumberAxis();
    final NumberAxis yAxis = new NumberAxis();

    //chart
    final ScatterChart<Number, Number> lineChart = new ScatterChart<Number, Number>(xAxis, yAxis);

    //prepare series
    XYChart.Series series1 = new XYChart.Series();
    series1.getData().add(new XYChart.Data(1, 2));
    series1.getData().add(new XYChart.Data(2, 2));
    series1.getData().add(new XYChart.Data(3, 1));
    series1.getData().add(new XYChart.Data(3, 3));
    series1.getData().add(new XYChart.Data(5, 2));

    HBox hbox = new HBox();
    //add series to chart
    lineChart.getData().addAll(series1);

    //take all series
    for (XYChart.Series<Number, Number> series : lineChart.getData()) {
      //for all series, take date, each data has Node (symbol) for representing point
      for (XYChart.Data<Number, Number> data : series.getData()) {
        // this node is StackPane
        StackPane stackPane =  (StackPane) data.getNode();
        stackPane.setPrefWidth(50);
        stackPane.setPrefHeight(50);
      }
    }

    hbox.getChildren().addAll(lineChart);
    Scene scene = new Scene(hbox, 800, 600);
    scene.getStylesheets().add(getClass().getResource("/resources/chart.css").toExternalForm());
    stage.setScene(scene);
    stage.show();
  }

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

Here is CSS wher you can set for this series radius

.default-color0.chart-symbol {
    -fx-background-radius: 30px;
}

In this example symbols are bigger enter image description here

Upvotes: 2

Related Questions