How is it possible to reduce the size of a JavaFX Chart so it fits into a ListCell?

Question

I'm building a JavaFX application and I want to put several very small LineChart into a ListView to get something like this: What I want it to look like

In my current attempts I've managed to get the charts correctly inside the ListView but so far I've failed to fit them to the desired size: What it currently looks like

Here is my custom ListCell implementation:

//similar to:
//https://stackoverflow.com/questions/31151281/javafx-linechart-as-a-cell-in-treetableview
public class ChartListCell extends ListCell<LineChart.Series> {

    private CategoryAxis xAxis = new CategoryAxis();
    private NumberAxis yAxis = new NumberAxis();
    private LineChart<String, Number> chart = new LineChart<>(xAxis, yAxis);

    public ChartListCell() {
        //a bunch of visual configuration similar to 
        //https://stackoverflow.com/questions/41005870/how-to-make-the-chart-content-area-take-up-the-maximum-area-available-to-it

        chart.setMaxHeight(17.0);
    }

    @Override
    public void updateItem(XYChart.Series item, boolean empty) {
        super.updateItem(item, empty);
        if (empty) {
            setGraphic(null);
            setText(null);
        } else {
            setGraphic(chart);
            if (!chart.getData().contains(item))
                chart.getData().setAll(item);
        }
    }
}

CSS styling to remove padding:

.chart{
    -fx-padding: 0px;
}
.chart-content{
    -fx-padding: 0px;
}
.chart-series-line{
    -fx-stroke-width: 2px;
    -fx-effect: null;
    -fx-stroke: #009682;
}
.axis{
    AXIS_COLOR: transparent;
}
.axis:top > .axis-label,
.axis:left > .axis-label {
    -fx-padding: 0;
}
.axis:bottom > .axis-label,
.axis:right > .axis-label {
    -fx-padding: 0;
}

The cell is bound to an ObservableList<XYChart.Series>. When I try to call this.setPrefHeight(17); on the cell everything breaks and the Chart is no longer visible.

It might actually be easier just to create your own graphic for this (`Pane` with a `Path` or collection of `Line`s), instead of trying to reuse a line chart. — James_D, Dec 19 '17 at 15:56
Have you tried it? It's probably not much more code than you have already posted just to get something simple working. — James_D, Dec 19 '17 at 16:43
I might try it tomorrow if no one comes up with any other ideas till then. — Ruben Jacob, Dec 19 '17 at 17:24

score 1 · Answer 1 · answered Dec 19 '17 at 16:07

1

You can use the snapshot method from the Node class to get a WriteableImage of each chart and show that in your ListCell.

answered Dec 19 '17 at 16:07

MMAdams

1,508
15
29

1

Thanks for the suggestion, this helps a bit and I'll use this method for now.However, I'd like to be able to use some functionality from the `LineChart` class like tooltips which I can't if I convert it to an image. – Ruben Jacob Dec 19 '17 at 17:21

How is it possible to reduce the size of a JavaFX Chart so it fits into a ListCell?

1 Answers1