[FIXED] Make the markers on the LineChart transparent. javafx

Issue

I'm displaying data on a LineChart. With GUI I am adding new data and I have a need to add new data series. I also need the new data series to have transparent symbols. If this is not done, then the following picture will turn out:

src="https://i.stack.imgur.com/XH4Lx.png" alt="Example showing bold lines are made up of markers" />

The data series are added dynamically, and I don't know if it's possible to somehow apply css styles to these data series.

The only solution that I have come up with so far is to create a new CSS file every time I change the chart, in which the transparency property will be written for each color:

/* Remove data series points */
.default-color0.chart-line-symbol {
    -fx-background-color: transparent;
}
/* Remove data series lines */
.default-color1.chart-series-line {
    -fx-stroke: transparent;
}
/* Remove data series lines */
.default-color2.chart-series-line {
    -fx-stroke: transparent;
}

Solution

Using pure css, you can add .chart-series-line { -fx-stroke: transparent; } and after that you can modify the stroke of the first series to its original color with .default-color0.chart-series-line { -fx-stroke: CHART_COLOR_1; }.

.chart-series-line {
    -fx-stroke: transparent;
}

.default-color0.chart-series-line {
    -fx-stroke: CHART_COLOR_1;
}

.default-color0.chart-line-symbol {
    -fx-background-color: transparent;
}

Alternatively, you can add a listener to the chart series ObservableList programmatically. When a change notification is received, you can iterate over the series and find the line Node using the lookup css selector .chart-series-line. Finally, you can set the node style -fx-stroke: transparent;.

Assuming that the first series (series1) always stays in the chart, here's a sample code:

chart.getData().add(series1);

chart.getData().addListener((ListChangeListener<XYChart.Series>) c -> {
    while (c.next()) {
        if (c.wasAdded()) {
            c.getAddedSubList().stream()
                    .map(series -> series.getNode().lookup(".chart-series-line"))
                    .forEach(node -> node.setStyle("-fx-stroke: transparent;"));
        }
    }
});

Answered By - Oboe
Answer Checked By - Marilyn (JavaFixing Volunteer)