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 data) {
    final Node node = data.getNode();
    final Text dataText = new Text(data.getYValue() + "");
    node.parentProperty().addListener(new ChangeListener() {
        @Override 
        public void changed(ObservableValue ov, Parent oldParent, Parent parent) {
            Group parentGroup = (Group) parent;
            parentGroup.getChildren().add(dataText);
        }
    });

    node.boundsInParentProperty().addListener(new ChangeListener() {

        @Override 
        public void changed(ObservableValue 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!

user_6028807 · Answer

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 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:

Adding an Image Inside Each Bar on a BarChart JavaFX

1 Answers