• StackedBarChart X Axis and Y Axis
  • Setting Categories on the X Axis
• Creating a StackedBarChart
• StackedBarChart Data Series
• Adding a StackedBarChart to the Scene Graph

The JavaFX StackedBarChart component is capable of drawing stacked bar charts inside your JavaFX applications. This can be useful in dashboard-like applications. The JavaFX StackedBarChart component is represented by the javafx.scene.chart.StackedBarChart class.

The StackedBarChart component is similar in function to the JavaFX BarChart component, but there are a few important differences. I will emphasize these differences when I get to them.

StackedBarChart X Axis and Y Axis

A JavaFX StackedBarChart draws a stacked bar chart. A stacked bar chart is a two-dimensional graph, meaning the graph has an X axis and a Y axis. For stacked bar charts the X axis is typically a category of some kind, and the Y axis is numerical.

For instance, imagine a stacked bar chart illustrating the number of visits to a website from desktop, phone and tablet users in the years 2014 and 2015. The stacked bar chart would show 2 bars. One bar with the stacked values for the visits from desktop, phone and tablet in 2014, and another bar with the values stacked for 2015.

The categories on the X axis would be "Desktop", "Phone" and "Tablet". The Y axis would show how many visits each category on the X axis has, so the Y axis is numerical.

You need to define the X axis and Y axis used by a StackedBarChart. A categorical axis is represented by the JavaFX class javafx.scene.chart.CategoryAxis. A numerical axis is represented by the JavaFX class javafx.scene.chart.NumberAxis .

Here is an example of creating a JavaFX CategoryAxis and NumberAxis:

CategoryAxis xAxis    = new CategoryAxis();
xAxis.setLabel("Devices");

NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Visits");

Setting Categories on the X Axis

The StackedBarChart has one difference from the BarChart with regards to the configuration of the X axis. The StackedBarChart requires that you set the categories directly on the CategoryAxis used as X axis. The following example creates an X axis with the categories explicitly set on the X axis:

CategoryAxis xAxis    = new CategoryAxis();
xAxis.setLabel("Devices");
xAxis.getCategories().addAll("Desktop", "Phone", "Tablet");

Creating a StackedBarChart

To create a JavaFX StackedBarChart component you must create an instance of the StackedBarChart class. You must pass an X axis and a Y axis instance to the StackedBarChart constructor. Here is a JavaFX StackedBarChart instantiation example:

CategoryAxis xAxis    = new CategoryAxis();
xAxis.setLabel("Devices");
xAxis.getCategories().addAll("Desktop", "Phone", "Tablet");

NumberAxis yAxis = new NumberAxis();
yAxis.setLabel("Visits");

StackedBarChart stackedBarChart = new StackedBarChart(xAxis, yAxis);

StackedBarChart Data Series

To get the JavaFX StackedBarChart component to display any bars, you must provide it with at least one data series. A data series is a list of data points. Each data point contains an X value and a Y value.

The StackedBarChart handles data series differently than the BarChart component. The StackedBarChart stacks the bars from the different data series on top of each other, instead of displaying them next to each other. The StackedBarChart stacks all values with the same X category into the same bar. That means that you might have to think a little differently when organizing your data than when using a BarChart.

To show the visits from desktop, phone and tablet from the same year stacked together in the same bar, you must create a data series per device, and use the year as category. Here is how that looks:

StackedBarChart     stackedBarChart = new StackedBarChart(xAxis, yAxis);

XYChart.Series dataSeries1 = new XYChart.Series();
dataSeries1.setName("Desktop");

dataSeries1.getData().add(new XYChart.Data("2014", 567));
dataSeries1.getData().add(new XYChart.Data("2015", 540));

stackedBarChart.getData().add(dataSeries1);

XYChart.Series dataSeries2 = new XYChart.Series();
dataSeries2.setName("Phone");

dataSeries2.getData().add(new XYChart.Data("2014"  , 65));
dataSeries2.getData().add(new XYChart.Data("2015"  , 120));

stackedBarChart.getData().add(dataSeries2);

XYChart.Series dataSeries3 = new XYChart.Series();
dataSeries3.setName("Tablet");

dataSeries3.getData().add(new XYChart.Data("2014"  , 23));
dataSeries3.getData().add(new XYChart.Data("2015"  , 36));

stackedBarChart.getData().add(dataSeries3);

Notice how one data series is created for each device type (desktop, phone, tablet), and that the data is categorized by year.

Adding a StackedBarChart to the Scene Graph

In order to make a StackedBarChart visible it must be added to the JavaFX scene graph. That means adding the StackedBarChart to a Scene object, or adding the StackedBarChart to a layout component which is added to a Scene object.

Here is an example of adding a JavaFX StackedBarChart to the JavaFX scene graph:

package com.jenkov.javafx.charts;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class StackedBarChartExperiments extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("StackedBarChart Experiments");

        CategoryAxis xAxis    = new CategoryAxis();
        xAxis.setLabel("Devices");
        xAxis.getCategories().addAll("Desktop", "Phone", "Tablet");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Visits");

        StackedBarChart     stackedBarChart = new StackedBarChart(xAxis, yAxis);

        XYChart.Series dataSeries1 = new XYChart.Series();
        dataSeries1.setName("Desktop");

        dataSeries1.getData().add(new XYChart.Data("2014", 567));
        dataSeries1.getData().add(new XYChart.Data("2015", 540));

        stackedBarChart.getData().add(dataSeries1);

        XYChart.Series dataSeries2 = new XYChart.Series();
        dataSeries2.setName("Phone");

        dataSeries2.getData().add(new XYChart.Data("2014"  , 65));
        dataSeries2.getData().add(new XYChart.Data("2015"  , 120));

        stackedBarChart.getData().add(dataSeries2);

        XYChart.Series dataSeries3 = new XYChart.Series();
        dataSeries3.setName("Tablet");

        dataSeries3.getData().add(new XYChart.Data("2014"  , 23));
        dataSeries3.getData().add(new XYChart.Data("2015"  , 36));

        stackedBarChart.getData().add(dataSeries3);

        VBox vbox = new VBox(stackedBarChart);

        Scene scene = new Scene(vbox, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(300);
        primaryStage.setWidth(1200);

        primaryStage.show();
    }


    public static void main(String[] args) {
        Application.launch(args);
    }
}

The application resulting from running this code would look similar to this: