JavaFX CSS WARNING: CSS Error parsing file : ... : Expected LBRACE at

Question

I recently ask a question about adding two vertical lines onto the JavaFX LineChart and now I am having issue with applying some style stuffs to the plots. I think this is a new question so I open a new thread.

Add Two Vertical Lines to LineChart

My question: How can I change different color of the series? I also want to change the background to be white.

The following is the chart that I create (it extends LineChart):

LineChartWithMarkers<Number, Number> chart = new LineChartWithMarkers<Number, Number>(xAxis, yAxis, dataset);

xAxis.setLabel("time(s)");
yAxis.setLabel("deg/s");

chart.setStyle(".chart-series-line { -fx-stroke-width: 2px; -fx-effect: null; ");
chart.setStyle(".default-color0.chart-series-line { -fx-stroke: blue; }");
chart.setStyle(".default-color1.chart-series-line { -fx-stroke: red; }");
chart.setStyle(".default-color0.chart-line-symbol { -fx-stroke: blue, blue; }");
chart.setStyle(".default-color1.chart-line-symbol { -fx-stroke: red, red; }");
chart.setStyle(".chart-legend { -fx-background-color: transparent; }");

For some reason, those codes won't apply to the chart. So I try to use a CSS file.

The following is the CSS file:

@CHARSET "ISO-8859-1";

.chart-series-line {
-fx-stroke-width: 1px;
-fx-effect: null;}

.default-color0.chart-series-line { -fx-stroke: blue; }
.default-color1.chart-series-line { -fx-stroke: red; }

.default-color0.chart-line-symbol { -fx-background-color: blue, blue; }
.default-color1.chart-line-symbol { -fx-background-color: red, red; }

.chart-legend {
-fx-background-color: transparent;
-fx-font-size: 0.75em;}

.chart-legend-item-symbol{
-fx-background-radius: 2;}

.chart-plot-background {
-fx-background-color: transparent;}

I try to follow Using JavaFX Charts: Styling Charts with CSS, but I get an error in the console is "WARNING: CSS Error parsing file : ... : Expected LBRACE at [1,9]"

I just switch from JDK 7 to JDK 8 today so I am not sure if it has anything to do with that...

Thanks for any help!

Solution

The @charset rule is not supported by JavaFX CSS, which is only a subset of full W3C CSS. Try removing it.

@ Rules

Beginning with JavaFX 8u20, the CSS @import is also partially supported. Only unconditional import is supported. In other words, the media‑type qualifier is not supported. Also, the JavaFX CSS parser is non-compliant with regard to where an @import may appear within a stylesheet (see At‑rules). Users are cautioned that this will be fixed in a future release. Adherence to the W3C standard is strongly advised.