JavaFX Area Chart


JavaFX Area Chart Tutorial:

JavaFX Area Chart is similar to the line chart.
It is also two axis chart and represent data in the series of points which are connected by the Line as in line chart.
But in the area chart the area under the connected point is painted.
It is also used to display trends over time.


  • Area Chart (Axis x-axis, Axis y-axis)
    Construct a new Area Chart with the given axis
  • Area Chart(Axis x-axis, Axis y-axis,ObservableList<XYChart.Series<X,Y>> data)
    Construct a new Area Chart with the given axis and data.

Creating Area Chart :

  • Drawing area chart is also similar to the line Chart.
  • First Create two axis for the line Chart using NumberAxis class.
    NumberAxis xAxis = new NumberAxis();
    NumberAxis yAxis = new NumberAxis();

    This constructor create an axis with auto ranging for bounds of axis.

  • Now creates an object of AreaChart by initiating AreaChart class with axis as
    AreaChart areaChart = new AreaChart (xAxis,yAxis);
  • Now create a series of data by using XYChart.Series Class as
    XYChart.Series dataSeries = new XYChart.Series();
  • Now assigning data for this series as
    XYChart.Data one=new XYChart.Data(1,10);
    XYChart.Data two=new XYChart.Data(2,20);
  • And at last add this series to the Area Chart as

Example of area chart:

package javafxtuts;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

 * @author
public class Javafxtuts extends Application {
    public void start(Stage primaryStage) {
         Pane root = new Pane();
         //Create two axis for line Chart using NumberAxis constructor
         //Here we use an empty Constructor so it set auto ranging of axis line
         NumberAxis xAxis = new NumberAxis();
         NumberAxis yAxis = new NumberAxis();
         //Now Create an instance of the AreaChart using both of axis
     AreaChart areaChart =new AreaChart(xAxis,yAxis);
     areaChart.setTitle("unique views");
     // Now Here we create a series of data using the XYChart.Series Class
    XYChart.Series dataSeries=new XYChart.Series();
    dataSeries.setName("per hour");

            // Now Creating data value using XYChart.Data Class
            XYChart.Data zero1=new XYChart.Data(0,360);
            XYChart.Data one1=new XYChart.Data(1,330);
            XYChart.Data two1=new XYChart.Data(2,550);
            XYChart.Data three1=new XYChart.Data(3,580);
            XYChart.Data four1=new XYChart.Data(4,400);
            XYChart.Data five1=new XYChart.Data(5,380);
            XYChart.Data six1=new XYChart.Data(6,480);
            XYChart.Data seven1=new XYChart.Data(7,420);
            // Adding Data values to the dataseries
        //Adding dataSeries to the AreaChart
    Scene scene = new Scene(root, 450, 450);

     * @param args the command line arguments
    public static void main(String[] args) {

Output :


Leave A Reply