2 Replies Latest reply: May 16, 2013 3:15 PM by jsmith RSS

    How do I set default colors for XY chart series (lines and legend)

    JGagnon
      I am implementing a line chart and need to override the default (caspian style) colors for the line colors and the legend symbols. I'm not displaying the chart symbols themselves as that would make the chart look bad. I've been able to successfully set the default colors for the lines via the CSS below, but cannot find a way to do the same for the series symbols that appear in the chart legend. How do I do this? Thanks.
      .default-color0.chart-series-line {
        -fx-stroke: rgb(0, 102, 255);
      }
      
      .default-color1.chart-series-line {
        -fx-stroke: rgb(0, 255, 102);
      }
      
      ...
      Update:

      Figured it out. Need to do the following:
      .default-color0.chart-line-symbol {
        -fx-background-color: rgb(R, G, B);
      }
      Edited by: 998038 on May 16, 2013 4:09 PM
        • 1. Re: How do I set default colors for XY chart series (lines and legend)
          KonradZuse
          This is what I used
          root
           { 
              display: block;
          
          }
           .lineChart
           {    
              -fx-stroke-width: 20px;  
          }
           
          .default-color0.chart-series-line { -fx-stroke: red; }
          .default-color1.chart-series-line { -fx-stroke: yellow; }
          .default-color2.chart-series-line { -fx-stroke: purple; }
          .default-color3.chart-series-line { -fx-stroke: blue; }
           
          .default-color0.chart-line-symbol { -fx-background-color: red, white; }
          .default-color1.chart-line-symbol { -fx-background-color: yellow, white; }
          .default-color2.chart-line-symbol { -fx-background-color: purple, white; }
          .default-color3.chart-line-symbol { -fx-background-color: blue, white; }
          • 2. Re: How do I set default colors for XY chart series (lines and legend)
            jsmith
            Here is some css to customize the line and legend colors in a line chart.
            /** file: chart.css
                place in same directory as LineChartWithCustomColors.java */
            
            .default-color0.chart-series-line {
              -fx-stroke: rgb(0, 102, 255);
            }
             
            .default-color1.chart-series-line {
              -fx-stroke: rgb(0, 255, 102);
            }
            
            .default-color0.chart-line-symbol {
              -fx-background-color: rgb(0, 102, 255), white;
            }
             
            .default-color1.chart-line-symbol {
              -fx-background-color: rgb(0, 255, 102), white;
            }
            And a test harness to try it:
            import javafx.application.Application;
            import javafx.event.*;
            import javafx.scene.Scene;
            import javafx.scene.chart.*;
            import javafx.scene.control.*;
            import javafx.scene.input.*;
            import javafx.stage.Stage;
             
            public class LineChartWithCustomColors extends Application {
             
                @Override public void start(final Stage stage) {
                    stage.setTitle("Line Chart Sample");
                    
                    //defining the axes
                    final NumberAxis xAxis = new NumberAxis();
                    xAxis.setLabel("Number of Month");
                    final NumberAxis yAxis = new NumberAxis();
                    
                    //creating the chart
                    final LineChart<Number,Number> lineChart = 
                            new LineChart<>(xAxis,yAxis);
                            
                    lineChart.setTitle("Stock Monitoring, 2010");
                    lineChart.setCreateSymbols(false);
                    
                    //defining a series
                    XYChart.Series series = new XYChart.Series();
                    series.setName("My portfolio");
                    
                    //populating the series with data
                    series.getData().setAll(
                      new XYChart.Data(1, 23),
                      new XYChart.Data(2, 14),
                      new XYChart.Data(3, 15),
                      new XYChart.Data(4, 24),
                      new XYChart.Data(5, 34),
                      new XYChart.Data(6, 36),
                      new XYChart.Data(7, 22),
                      new XYChart.Data(8, 45),
                      new XYChart.Data(9, 43),
                      new XYChart.Data(10, 17),
                      new XYChart.Data(11, 29),
                      new XYChart.Data(12, 25)
                    );
                    
                    lineChart.getData().add(series);
                    
                    //adding a context menu item to the chart
                    final MenuItem resizeItem = new MenuItem("Resize");
                    resizeItem.setOnAction(new EventHandler<ActionEvent>() {
                      @Override public void handle(ActionEvent event) {
                        System.out.println("Resize requested");
                      }
                    });
                           
                    final ContextMenu menu = new ContextMenu(
                      resizeItem
                    );
                    
                    lineChart.setOnMouseClicked(new EventHandler<MouseEvent>() {
                      @Override public void handle(MouseEvent event) {
                        if (MouseButton.SECONDARY.equals(event.getButton())) {
                          menu.show(stage, event.getScreenX(), event.getScreenY());
                        }  
                      }
                    });
                    
                    Scene scene = 
                      new Scene(
                        lineChart,800,600
                      );
                    
                    stage.setScene(
                      scene
                    );
                    stage.show();
                    
                    scene.getStylesheets().add(
                      getClass().getResource("chart.css").toExternalForm()
                    );
                }
             
                public static void main(String[] args) {
                    launch(args);
                }
            }