1 Reply Latest reply: Sep 17, 2013 10:40 PM by bouye RSS

    javafx how to combine area and line series in one xychart



      i am working in javafx charts. i am trying to combine area and line series in single xy plot. i got the solution using stack pane.

        Inline image 1

      can i do same thing without using stack pane. i am attaching code below. pls help to do without stack pane.


      code is


      package charts;


      import java.util.Set;

      import javafx.application.Application;

      import javafx.beans.property.SimpleDoubleProperty;

      import javafx.event.ActionEvent;

      import javafx.event.EventHandler;

      import javafx.geometry.Side;

      import javafx.scene.Group;

      import javafx.scene.chart.NumberAxis;

      import javafx.scene.chart.XYChart;

      import javafx.stage.Stage;

      import javafx.scene.Scene;

      import javafx.scene.Node;

      import javafx.scene.chart.*;

      import javafx.scene.control.Button;

      import javafx.scene.input.MouseEvent;

      import javafx.scene.layout.BorderPane;

      import javafx.scene.layout.StackPane;

      public class combined_scatter_chart extends Application {

      StackPane mainGraphStackPane = null;

      BorderPane pane;

      XYChart.Series series1 = new XYChart.Series();


      public void start(Stage stage) {

      final NumberAxis xAxisLC = new NumberAxis(1, 12, 1);

      final NumberAxis yAxisLC = new NumberAxis(0.53000, 0.53910, 0.0005);


      yAxisLC.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxisLC) {


      public String toString(Number object) {

      return String.format("%7.5f", object);



      final LineChart<Number, Number> lineChart = new LineChart<>(xAxisLC, yAxisLC);





      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));

      pane = new BorderPane();


      mainGraphStackPane = new StackPane();


      //NumberAxis xAxisBC = duplicateNumberAxis(xAxisLC);

      //NumberAxis yAxisBC = duplicateNumberAxis(yAxisLC);

      AreaChart<Number, Number> areaChart = new AreaChart(xAxisLC, yAxisLC);




      XYChart.Series series2 = new XYChart.Series();

      series2.getData().add(new XYChart.Data(2, 0.53185));

      series2.getData().add(new XYChart.Data(1, 0.532235));

      series2.getData().add(new XYChart.Data(4, 0.53234));

      series2.getData().add(new XYChart.Data(3, 0.538765));

      series2.getData().add(new XYChart.Data(6, 0.53442));

      series2.getData().add(new XYChart.Data(7, 0.534658));

      series2.getData().add(new XYChart.Data(9, 0.53023));

      series2.getData().add(new XYChart.Data(10, 0.53001));

      series2.getData().add(new XYChart.Data(11, 0.53589));

      series2.getData().add(new XYChart.Data(10, 0.53476));

      series2.getData().add(new XYChart.Data(11, 0.530123));

      series2.getData().add(new XYChart.Data(12, 0.531035));


      Set<Node> chartNode = areaChart.lookupAll(".chart-plot-background");

      for(final Node chr : chartNode){

      chr.setStyle("-fx-background-color: transparent;");                          


      chartNode = lineChart.lookupAll(".chart-plot-background");

      for(final Node chr : chartNode){

      chr.setStyle("-fx-background-color: transparent");                           



      Scene scene = new Scene(mainGraphStackPane, 800, 600);




      Group root = new Group();





      //EventHandler<MouseEvent> mouseHandler = new EventHandler<MouseEvent>() {

      public static void main(String[] args) {




        • 1. Re: javafx how to combine area and line series in one xychart

          Already commented on the Jira a while ago that having Line and Area being two different kind of chart felt strange (to stay polite) as both are the same just with different styles applied on each series. But I guess as far as implementation goes, LineChart is lighter due to the fact it's missing the polygon/path that represents the area of the series and only contains the broken line itself.


          Have you tried using an AreaChart instead and playing with CSS to make one series have a full transparent fill color instead? Might be easier than trying to super-impose two kinds of chart on top of each other with correct alignment.

          You may end having to tweak the CSS of the legend of that series too to make sure it displays ok with the proper color.