The following program demonstrates a rather strange bug in the CSS code. The code draws two data points into an XYChart. Both shall have the same symbol: A small 'x' drawn using SVG. The SVG path used for both points is the same, the only actual difference is that point 1 is using Java Code to pass in the SVG path string, while the second point relies on CSS for that. Surprisingly, point 1 is drawn, while point 2 is missing. Hence I suspect a bug in the SVG-CSS-Converter.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class ChartSample extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        // Data Point 1 uses Java-defined SVG Path
        SVGPath svgPath = new SVGPath();
        svgPath.setContent("M 1,1 L 5,5 M 1,5 L 5,1");
        XYChart.Data<Number, Number> data1 = new XYChart.Data<>(1, 1);
        data1.setNode(svgPath);

        // Data Point 2 used CSS-defined SVG Path
        XYChart.Data<Number, Number> data2 = new XYChart.Data<>(2, 1);

        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.getData().addAll(data1, data2);
        ScatterChart<Number, Number> chart = new ScatterChart<>(new NumberAxis(), new NumberAxis());
        chart.getData().add(series);

        Scene scene = new Scene(chart, 300, 275);
        scene.getStylesheets().add(this.getClass().getResource("chart.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

/* chart.css */
.chart-symbol {
-fx-stroke: red;
-fx-shape: "M 1,1 L 5,5 M 1,5 L 5,1";
}