I create an line chart that is styled with the following CSS:

.default-color0.chart-series-line {
    -fx-stroke: #C00000;
}
.default-color1.chart-series-line {
    -fx-stroke: #0F0F0F;
    -fx-stroke-dash-array: 5 5;
}
.default-color2.chart-series-line {
    -fx-stroke: #006400;
    -fx-stroke-dash-array: 5 5;
}
.default-color3.chart-series-line {
    -fx-stroke: #8B4513;
    -fx-stroke-dash-array: 5 5;
}

There is also css to style the symbols:

.default-color0.chart-line-symbol { -fx-background-color: #C00000, white; }

.default-color1.chart-line-symbol {
    visibility: hidden;
}
.default-color2.chart-line-symbol {
    visibility: hidden;
}
.default-color3.chart-line-symbol {
    visibility: hidden;
}

I doubt the CSS is a factor here; the same issue would probably occur using the default (caspian) css.

After adding 3 series to the line chart, everything looks fine: there are red, black and green curves. I then remove the second series that was added (the series corresponding to the black curve). The chart now has a red curve and a green curve. I expected to have a red curve and a back curve since what was the third series is now the second series and the color for the second series is supposed to be black. However, in some ways it makes sense that the green curve was not updated to be black. However, when I add another series, I get two green curves (in addition to the red curve). This is a problem.

The series is removed from the line chart as follows:
chart.getData().remove(k);
Where "chart" is an instance of LineChart<Number, Number> and k = 1 in this example.