JavaFX 2.x : chart white borders removal - charts

Question

I my code below I plot two series in a SplitPane, but I have some white borders I would like to remove, so that the grids will fill all the chart space.
Here is a picture to show where I would like to remove
and this is my code
import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.Chart;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.control.SplitPane;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
public class XyChartInSplitMove extends Application {
SplitPane splitPane1 = null;
BorderPane pane;
BorderPane pane2;
XYChart.Series series1 = new XYChart.Series();
XYChart.Series series2 = new XYChart.Series();
SimpleDoubleProperty rectinitX = new SimpleDoubleProperty();
SimpleDoubleProperty rectinitY = new SimpleDoubleProperty();
#Override
public void start(Stage stage) {
final NumberAxis xAxis = new NumberAxis(1, 12, 1);
final NumberAxis yAxis = new NumberAxis(0.53000, 0.53910, 0.0005);
xAxis.setAnimated(false);
yAxis.setAnimated(false);
xAxis.setScaleX(0);
xAxis.setVisible(false);
yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis) {
#Override
public String toString(Number object) {
return String.format("%7.5f", object);
}
});
final LineChart<Number, Number> lineChart1 = new LineChart<Number, Number>(xAxis, yAxis);
lineChart1.setCreateSymbols(false);
lineChart1.setAlternativeRowFillVisible(false);
lineChart1.setAnimated(false);
lineChart1.setLegendVisible(false);
series1.getData().add(new XYChart.Data(1, 0.53185));
series1.getData().add(new XYChart.Data(2, 0.532235));
series1.getData().add(new XYChart.Data(3, 0.53234));
series1.getData().add(new XYChart.Data(4, 0.538765));
series1.getData().add(new XYChart.Data(5, 0.53442));
series1.getData().add(new XYChart.Data(6, 0.534658));
series1.getData().add(new XYChart.Data(7, 0.53023));
series1.getData().add(new XYChart.Data(8, 0.53001));
series1.getData().add(new XYChart.Data(9, 0.53589));
series1.getData().add(new XYChart.Data(10, 0.53476));
series1.getData().add(new XYChart.Data(11, 0.530123));
series1.getData().add(new XYChart.Data(12, 0.531035));
lineChart1.getData().addAll(series1);
pane = new BorderPane();
pane.setCenter(lineChart1);
splitPane1 = new SplitPane();
splitPane1.setOrientation(Orientation.VERTICAL);
splitPane1.getItems().addAll(pane);
splitPane1.setDividerPosition(0, 1);
Platform.runLater(new Runnable() {
#Override
public void run() {
double percSplit;
ObservableList<SplitPane.Divider> splitDiv = splitPane1.getDividers();
percSplit = 1 / (double) (splitDiv.size() + 1);
for (int i = 0; i < splitDiv.size(); i++) {
splitPane1.setDividerPosition(i, percSplit);
percSplit += 1 / (double) (splitDiv.size() + 1);
}
}
});
//BarChart
final CategoryAxis xAxis2 = new CategoryAxis();
final NumberAxis yAxis2 = new NumberAxis();
yAxis2.setTickUnit(1);
yAxis2.setPrefWidth(35);
yAxis2.setMinorTickCount(10);
yAxis2.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis2) {
#Override
public String toString(Number object) {
String label;
label = String.format("%7.2f", object.floatValue());
return label;
}
});
final BarChart<String, Number> barChart2 = new BarChart<String, Number>(xAxis2, yAxis2);
barChart2.setAlternativeRowFillVisible(false);
barChart2.setLegendVisible(false);
barChart2.setAnimated(false);
series2.getData().add(new XYChart.Data("Jan", 1));
series2.getData().add(new XYChart.Data("Feb", 3));
series2.getData().add(new XYChart.Data("Mar", 1.5));
series2.getData().add(new XYChart.Data("Apr", 3));
series2.getData().add(new XYChart.Data("May", 4.5));
series2.getData().add(new XYChart.Data("Jun", 5));
series2.getData().add(new XYChart.Data("Jul", 4));
series2.getData().add(new XYChart.Data("Aug", 8));
series2.getData().add(new XYChart.Data("Sep", 16.5));
series2.getData().add(new XYChart.Data("Oct", 13.9));
series2.getData().add(new XYChart.Data("Nov", 17));
series2.getData().add(new XYChart.Data("Dec", 20));
barChart2.getData().addAll(series2);
pane2 = new BorderPane();
pane2.setCenter(barChart2);
Platform.runLater(new Runnable() {
#Override
public void run() {
double percSplit;
splitPane1.getItems().addAll(pane2);
ObservableList<SplitPane.Divider> splitDiv = splitPane1.getDividers();
percSplit = 1 / (double) (splitDiv.size() + 1);
for (int i = 0; i < splitDiv.size(); i++) {
splitPane1.setDividerPosition(i, percSplit);
percSplit += 1 / (double) (splitDiv.size() + 1);
}
}
});
Scene scene = new Scene(splitPane1, 800, 600);
stage.setScene(scene);
pane.setOnMouseClicked(mouseHandler);
pane.setOnMouseDragged(mouseHandler);
pane.setOnMouseEntered(mouseHandler);
pane.setOnMouseExited(mouseHandler);
pane.setOnMouseMoved(mouseHandler);
pane.setOnMouseReleased(mouseHandler);
stage.show();
}
EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent mouseEvent) {
if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED || mouseEvent.getEventType() == MouseEvent.MOUSE_MOVED) {
LineChart<Number, Number> lineChart = (LineChart<Number, Number>) pane.getCenter();
NumberAxis yAxis = (NumberAxis) lineChart.getYAxis();
NumberAxis xAxis = (NumberAxis) lineChart.getXAxis();
double newXlower = xAxis.getLowerBound(), newXupper = xAxis.getUpperBound();
double newYlower = yAxis.getLowerBound(), newYupper = yAxis.getUpperBound();
double delta = 0.3;
if (mouseEvent.getEventType() == MouseEvent.MOUSE_DRAGGED) {
if (rectinitX.get() < mouseEvent.getX()) {
newXlower = xAxis.getLowerBound() - delta;
newXupper = xAxis.getUpperBound() - delta;
} else if (rectinitX.get() > mouseEvent.getX()) {
newXlower = xAxis.getLowerBound() + delta;
newXupper = xAxis.getUpperBound() + delta;
}
xAxis.setLowerBound(newXlower);
xAxis.setUpperBound(newXupper);
// Y-Axis Moving
if (rectinitY.get() < mouseEvent.getY()) {
newYlower = yAxis.getLowerBound() + delta / 1000;
newYupper = yAxis.getUpperBound() + delta / 1000;
} else if (rectinitY.get() > mouseEvent.getY()) {
newYlower = yAxis.getLowerBound() - delta / 1000;
newYupper = yAxis.getUpperBound() - delta / 1000;
}
yAxis.setLowerBound(newYlower);
yAxis.setUpperBound(newYupper);
}
rectinitX.set(mouseEvent.getX());
rectinitY.set(mouseEvent.getY());
BarChart<String, Number> barChart2 = (BarChart<String, Number>) pane2.getCenter();
double chartWidth = xAxis.getWidth();
double axisSpan = xAxis.getUpperBound() - xAxis.getLowerBound();
double displacement = (chartWidth / axisSpan) * (1 - newXlower);
for (Node node : barChart2.getChildrenUnmodifiable()) {
if (node.getClass().getEnclosingClass() == Chart.class) {
for (Node node2 : ((Parent) node).getChildrenUnmodifiable()) {
if ((node2 == barChart2.getXAxis())) {
node2.translateXProperty().set(displacement);
}
if (node2.getClass().getEnclosingClass() == XYChart.class) {
for (Node node3 : ((Parent) node2).getChildrenUnmodifiable()) {
if (node3.getClass() == Group.class) {
node3.translateXProperty().set(displacement);
}
}
}
}
}
}
}
}
};
public static void main(String[] args) {
launch(args);
}
}
To hide the upper X axis I have used xAxis.setScaleX(0); but I am not sure if this is the best way to hide X axis.
Any help really appreciated

Answer 1

Define a style.css:
.chart {
-fx-padding: 1px;
}
.chart-content {
-fx-padding: 0px;
}
Add this file to the stylesheets of app:
scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
See the results.
Further. To hide the gap between top and bottom charts, you can move top chart to down like this, the gap appears on the top however:
...
...
stage.show();
// It should be after stage.show()
lineChart1.setTranslateY(xAxis.getHeight());
// Or give constant value if you want to put this code before the stage.show()
// lineChart1.setTranslateY(28);