Adding an Image Inside Each Bar on a BarChart JavaFX

Question

I know how to add text on top or inside each bar of a BarChart

private void displayLabelForData(XYChart.Data<String, Number> data) {
    final Node node = data.getNode();
    final Text dataText = new Text(data.getYValue() + "");
    node.parentProperty().addListener(new ChangeListener<Parent>() {
        @Override 
        public void changed(ObservableValue<? extends Parent> ov, Parent oldParent, Parent parent) {
            Group parentGroup = (Group) parent;
            parentGroup.getChildren().add(dataText);
        }
    });

    node.boundsInParentProperty().addListener(new ChangeListener<Bounds>() {

        @Override 
        public void changed(ObservableValue<? extends Bounds> ov, Bounds oldBounds, Bounds bounds) {
            dataText.setLayoutX(Math.round(bounds.getMinX() + bounds.getWidth() / 2 - dataText.prefWidth(-1) / 2));

            //on top of each bar
            dataText.setLayoutY(Math.round(bounds.getMinY() - dataText.prefHeight(-1) * 0.5));
        }
    });
}

Or inside each bar

dataText.setLayoutY(Math.round(bounds.getMinY() - dataText.prefHeight(-1) * -0.5));

I also know how to use JavaFX to load an image and also display image to the ImageView.

Image myImage = new Image("location.png");
ImageView viewImage = new ImageView();
viewImage.setImage(myImage);

Now let say I have 5 bars in a barChart and I have 5 images.

Now I like to know if it is possible to add each image inside each bar of a barChart. Is there a method I don't know about?

Thanks!

Also, your general mechanism for adding nodes to the bar chart is not very robust (assumes that the node for each data point is contained in a group, that the parent is set sometime after the data point constructor completes, etc). A more API-friendly approach for a line chart is shown at https://stackoverflow.com/questions/38871202/how-to-add-shapes-on-javafx-linechart: I would recommend adapting that approach instead. — James_D, May 21 '20 at 16:31
You'll maybe need to adapt it a little, but the general idea there should work. — James_D, May 21 '20 at 16:52
you again want others to do your work for you, and again found one — kleopatra, May 21 '20 at 21:41

score 4 · Accepted Answer · answered May 21 '20 at 17:20

Here is an example of how to add images to BarChart's data:

import javafx.application.Application;
import javafx.application.Platform;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class BarChartExample extends Application {

    @Override 
    public void start(Stage stage) {
        stage.setTitle("Bar Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        final BarChart<String, Number> barChart = new BarChart<>(xAxis, yAxis);
        barChart.setTitle("Country Summary");
        xAxis.setLabel("Country");
        yAxis.setLabel("Value");

        XYChart.Series series = new XYChart.Series();
        series.setName("2003");
        series.getData().addAll(new XYChart.Data("Brazil", 20148.82),
                new XYChart.Data("France", 10000),
                new XYChart.Data("Italy", 35407.15),
                new XYChart.Data("USA", 17000));


        Platform.runLater(() -> {
            series.getData().forEach(seriesData -> {
                XYChart.Data data = (XYChart.Data) seriesData;
                StackPane node = (StackPane) data.getNode();
                String name = (String) data.getXValue();
                ImageView imageView = getImageForCountry(name);
                imageView.fitWidthProperty().bind(node.widthProperty().multiply(.5));
                imageView.setPreserveRatio(true);
                node.getChildren().add(imageView);
            });
        });
        barChart.getData().addAll(series);
        Scene scene  = new Scene(barChart, 800, 600);
        stage.setScene(scene);
        stage.show();
    }

    private ImageView getImageForCountry(String countryName) {
        URL url = getClass().getResource(countryName.toLowerCase() + ".png");
        Image image = new Image(url);
        return new ImageView(image);
    }

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

Output:

This can also be done using css, see the [Oracle chart styling tutorial](https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/css-styles.htm#CIHGIAGE): Example 38-14 Adding Images to the Bar Background — jewelsea, Oct 04 '21 at 09:23
@jewelsea You're right. Maybe I should add that way to my answer. But how can we make the image dynamic? I mean, what if `France` is not always the second bar? — Miss Chanandler Bong, Oct 04 '21 at 09:30
Construct the css style sheet from a dynamically built string which is a [data uri](https://bugs.openjdk.java.net/browse/JDK-8267554) defining images for the position of each category on the axis. — jewelsea, Oct 04 '21 at 09:51
@jewelsea Thanks. I didn't know about this feature. Another issue is that when using CSS like in the tutorial, images are going to be repeated to fill the height of the bar. — Miss Chanandler Bong, Oct 04 '21 at 12:20

Adding an Image Inside Each Bar on a BarChart JavaFX

1 Answers1

Linked