Problem while displaying colors in JavaFX bar chart

Question

In my project, I am using a barchart and a linechart in the same frame to display the same data. However, due to some reason, I am getting an output where there is no color in either the barchart or the linechart.

For example: In this image, the linechart has color but the barchart doesn't.

The code that I used:

FXML file:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="401.0" prefWidth="802.0" style="-fx-background-color: white;" stylesheets="@stylesheet.css" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication26.FXMLDocumentController">
   <children>
      <AnchorPane layoutX="1.0" layoutY="14.0" prefHeight="303.0" prefWidth="801.0" AnchorPane.bottomAnchor="46.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="14.0">
         <children>
            <AnchorPane layoutX="342.0" layoutY="-2.0" prefHeight="244.0" prefWidth="419.0" style="-fx-border-color: #4E6172; -fx-background-color: white;" AnchorPane.bottomAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="-2.0">
               <children>
                  <LineChart fx:id="linechart" layoutX="69.0" layoutY="11.0" prefHeight="353.0" prefWidth="380.0">
                    <xAxis>
                      <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </LineChart>
               </children>
            </AnchorPane>
            <AnchorPane layoutX="8.0" layoutY="-2.0" prefHeight="367.0" prefWidth="392.0" style="-fx-border-color: #4E6172; -fx-background-color: white;" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="399.0" AnchorPane.topAnchor="-2.0">
               <children>
                  <BarChart fx:id="barchart" layoutX="3.0" layoutY="3.0" prefHeight="363.0" prefWidth="391.0" AnchorPane.bottomAnchor="1.0" AnchorPane.leftAnchor="1.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="2.0">
                    <xAxis>
                      <CategoryAxis side="BOTTOM" />
                    </xAxis>
                    <yAxis>
                      <NumberAxis side="LEFT" />
                    </yAxis>
                  </BarChart>
               </children>
            </AnchorPane>
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

Java Controller:

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package javafxapplication26;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.XYChart;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

/**
 *
 * @author param
 */
public class FXMLDocumentController implements Initializable {
    
  
    
    @FXML
    private LineChart<String, Number> linechart;
    @FXML
    private BarChart<String, Number> barchart;
    
   
    @Override
    public void initialize(URL url, ResourceBundle rb) {
         XYChart.Series<String, Number> series= new  XYChart.Series<String, Number>();
        series.getData().add(new  XYChart.Data<String, Number>("Jan",12));
        series.getData().add(new  XYChart.Data<String, Number>("Feb",20));
        series.getData().add(new  XYChart.Data<String, Number>("March",10));
        series.getData().add(new  XYChart.Data<String, Number>("April",14));
    
      
        linechart.getData().add(series);
        barchart.getData().add(series);
        
      
        // TODO
    }      
} 
}

As shown in the image, only one of either the barchart or the linechart is capable of displaying color. I tried using the -fx-bar-fill method, but even that didn't work.

Answer 1

As @kleopatra and @Slaw mentioned, the problem was that I was using a single Series for both the barchart and the linechart. This was the cause of the error.

The solution was to use two different Series, titled series1 and series2 for the barchart and the linechart respectively.

The corrected code:

package javafxapplication26;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.XYChart;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

/**
 *
 * @author param
 */
public class FXMLDocumentController implements Initializable {
    
  
    
    @FXML
    private LineChart<String, Number> linechart;
    @FXML
    private BarChart<String, Number> barchart;
    
   
    @Override
    public void initialize(URL url, ResourceBundle rb) {
        XYChart.Series<String, Number> series= new  XYChart.Series<String, Number>(); //For the barchart
        series.getData().add(new  XYChart.Data<String, Number>("Jan",12));
        series.getData().add(new  XYChart.Data<String, Number>("Feb",20));
        series.getData().add(new  XYChart.Data<String, Number>("March",10));
        series.getData().add(new  XYChart.Data<String, Number>("April",14));
    
        XYChart.Series<String, Number> series2= new  XYChart.Series<String, Number>(); //For the linechart
        series2.getData().add(new  XYChart.Data<String, Number>("Jan",12));
        series2.getData().add(new  XYChart.Data<String, Number>("Feb",20));
        series2.getData().add(new  XYChart.Data<String, Number>("March",10));
        series2.getData().add(new  XYChart.Data<String, Number>("April",14));
        
        
        barchart.getData().add(series);   
        linechart.getData().add(series2);

    }     
}

As @Slaw mentioned, the problem was that each barchart or linechart needs to have it's own Series and Data. This is because each XYChart.Series and XYChart.Data supply the Node associated with them, and this is what is displayed in the graph.

Corrected Output: