Issue
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.
Solution
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:
Answered By - theboss12k
Answer Checked By - Mildred Charles (JavaFixing Admin)
