Search code examples
javafxtornadofx

How to get rid of extra-space (padding) between piechart and its border in JavaFX / TornadoFX?


I have a simple piechart without name, labels, legend. I need only a circle itself. But I can't get rid of that padding between borders and content. I've tried these all and received no result (TornadoFX CSS):

diagram {
  padding = box(0.px)
  labelPadding = box(0.px)

  borderImageInsets += box(0.px)
  borderInsets += box(0.px)
  backgroundInsets += box(0.px)

  maxWidth = 25.px
  maxHeight = 25.px
  labelLineLength = 0.px
  borderColor += box(Color.GREEN)
}

I want to get rid of this extra-space between a circle and green borders. Does anybody know any Java / CSS / TornadoFX solutions/options here ?

enter image description here


Solution

  • You can use a negative value for e. g. padding. Please have a look at this small example (JavaFX):

    package sample;
    
    import javafx.application.Application;
    import javafx.collections.FXCollections;
    import javafx.collections.ObservableList;
    import javafx.scene.Scene;
    import javafx.scene.chart.PieChart;
    import javafx.scene.layout.VBox;
    import javafx.stage.Stage;
    
    public class Main extends Application {
    
        @Override
        public void start(Stage stage) {
    
            VBox vBox = new VBox();
            ObservableList<PieChart.Data> pieChartData =
                    FXCollections.observableArrayList(
                            new PieChart.Data("", 75),
                            new PieChart.Data("", 25));
            final PieChart chart = new PieChart(pieChartData);
            chart.setLegendVisible(false);
    
            // Negative value for padding:
            chart.setStyle("-fx-padding: -35; -fx-border-color: green; -fx-border-width: 3;");
    
            vBox.getChildren().addAll(chart);
            stage.setScene(new Scene(vBox));
            stage.show();
    
            //chart.setMaxWidth(400d); // careful
        }
    
    
        public static void main(String[] args) {
            launch(args);
        }
    }
    

    enter image description here

    You can also quickly set a maximum width for the chart to make the green box a square but be careful please, it could mess with the overall layout:

    enter image description here