title: Conditionally Color Background JavaFX LineChart
body: <p>I'm looking to conditionally change the background color of a line chart.  In the given example, I'm looking to modify the chart so that any sections with a Y value >=3 get shaded red in the background:</p>
  
  <p>LineChartJavaFXTest.java</p>
  
  <pre><code>import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.chart.LineChart;
  import javafx.scene.chart.NumberAxis;
  import javafx.scene.chart.XYChart;
  import javafx.stage.Stage;
  
  
  public class LineChartJavaFXTest extends Application {
  
      @Override public void start(Stage stage) {
          stage.setTitle("Line Chart Sample");
          //defining the axes
          final NumberAxis xAxis = new NumberAxis();
          final NumberAxis yAxis = new NumberAxis();
          xAxis.setLabel("Seconds");
          yAxis.setLabel("Volume");
          //creating the chart
          final LineChart&lt;Number,Number&gt; lineChart = 
                  new LineChart&lt;Number,Number&gt;(xAxis,yAxis);
  
          lineChart.setTitle("Test Chart");
          //defining a series
          XYChart.Series series = new XYChart.Series();
          //populating the series with data
          series.getData().add(new XYChart.Data(1, 0));
          series.getData().add(new XYChart.Data(2, 1));
          series.getData().add(new XYChart.Data(3, 2));
          series.getData().add(new XYChart.Data(4, 2));
          series.getData().add(new XYChart.Data(5, 1));
          series.getData().add(new XYChart.Data(6, 2));
          series.getData().add(new XYChart.Data(7, 3));
          series.getData().add(new XYChart.Data(8, 3));
          series.getData().add(new XYChart.Data(9, 4));
          series.getData().add(new XYChart.Data(10, 3));
          series.getData().add(new XYChart.Data(11, 2));
          series.getData().add(new XYChart.Data(12, 1));
  
          Scene scene  = new Scene(lineChart,800,600);
          scene.getStylesheets().add("LineChart.css");
          lineChart.getData().add(series);
          lineChart.applyCss();
  
          stage.setScene(scene);
          stage.show();
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  }
  </code></pre>
  
  <p>LineChart.css</p>
  
  <pre><code>.chart {
      -fx-padding: 10px;
      -fx-background-color: #010101;
      -fx-legend-visible: false;
  }
  
  .chart-content {
      -fx-padding: 30px;    
  }
  
  .chart-title {
      -fx-text-fill: #ffffff;
      -fx-font-size: 1.6em;
  }
  
  .axis-label {
      -fx-text-fill: #ffffff;
  }
  
  .chart-plot-background {
      -fx-background-color:transparent;
  }
  
  .chart-vertical-grid-lines {
      -fx-stroke:#505050;
  }
  
  .chart-horizontal-grid-lines {
      -fx-stroke: #505050;
  }
  
  .chart-alternative-row-fill {
      -fx-fill:transparent;
      -fx-stroke: transparent;
  }
  
  .default-color0.chart-series-line {
      -fx-stroke: #0000ff;
  }
  
  .default-color0.chart-line-symbol {
      -fx-background-color: #0000ff, white;
  }
  </code></pre>
  
  <p>Result
  <a href="https://i.stack.imgur.com/Biuos.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Biuos.png" alt="Chart"></a></p>