JavaFX graphs look pretty good!

When I was doing my 3rd year project in university I needed a good looking chart to use in my user interface and now I have grown older (nearly 2 whole years!) I wish I would have turned to the charts in JavaFX rather than the ugly looking JChart2D API that I used. Now don’t get me wrong I’m not hating on JChart2D as it was easy to use and at the time I was really happy with it. But the charts / graphs that you can use in JavaFX look really good, they even come with some fancy animations by default. Okay, I’m finished hyping up these graphs, so I’m going to show you a little example application I wrote and hopefully you will feel the same about them as me…



Before you go any further I recommend that you read up on the basics of using JavaFX, my other post Getting started with JavaFX covers this.

In this post I will cover the basic use of a LineChart and AreaChart. The code is pretty simple and only requires a little bit of set up in the Controller and fxml. All you need to do is add the chart to the fxml code, give it a fx:id, set up it’s properties to your liking and your done.

This is this the set up for the LineChart. It defines the axis’s upper and lower bounds which will change the chart to look more like a graph. By setting the lower bound of the x or y axis will cause the chart to auto draw lines to represent the axis that will pass through the coordinates (0,0). The tickUnit represents how separated the grid lines on the chart are and autoRanging has also been disabled to prevent the chart from resizing itself to best fit the content that is on the chart. Finally a cursor has been defined, there are a few other cursors that can be used but I think the crosshair cursor looks the best.

Now you know how to create the chart your going to need to know how to plot some points onto it, unless you are happy with it being empty…

Here we are creating a new series object which will contain the plotted points.

final XYChart.Series<Double, Double> series = new XYChart.Series<Double, Double>() 

Then adding the plots to the series.

series.getData().add(new XYChart.Data<Double, Double>(x, Math.pow(x, 2)))

The plotted coordinates are stored in the form of (x,y) so in the example above the x coordinate has the value x and the y coordinate takes the value of x^2.

The final step is to add the series to the chart.


After this has been done the points will be plotted onto the chart and will be connected together between each plot. The order that the plots (XYChart.Data) are added to the series does not matter as it will connect the closest plots to each other, although this isn’t relevant if your adding plots from loops.

Now that the basics of using these charts is covered lets get onto a larger example. Below is all the code your need to get setup.

MainAppLauncher is used to load run the JavaFX code.

MainAppController is the center piece of this code which controls the chart by handling the ActionEvents fired by button presses, which in this example leads to the lines being drawn onto the chart. I have also used some lambda expressions in this example to make the code shorter and a little bit fancier.

MyGraph is a wrapper object that takes in a XYChart which both LineChart and AreaChart are and has some methods to plot and clear lines. This code could be in MainAppController as there isn’t much code in it but it looks much tidier like this. It uses the plotLine code shown above although it is split out into a two methods instead.

MainApp.fxml contains all the code to set up the visuals of the application.

css.css is the stylesheet that is used for this application and is referenced inside of MainApp.fxml.

If you try to run this by yourself there are a few changes you will need to remember to make otherwise you are going to run into some errors. Make sure that you have your files structured well or understand how the paths to the files work. Below is a picture of how I structured my files.


Project Structure

Once you have sorted out your project structure remember to rename the paths in your code to match the structure and names you have chosen. This includes the path in MainAppLauncher and the paths to the controller and css in MainApp.fxml.

Once everything has been put together correctly you should be able to run it and it will look like this.


Area Chart Example

And by pressing the Line Graph button it will look like this.


Line Chart Example

So now that you have seen a little bit of what the charts in JavaFX have to offer you might consider using it when your writing some of your own applications. They are pretty easy to setup and come with some decent styles and animations by default. I will write a few more posts on how to use some of the other charts in the future.


  1. Can you post a link to download the code? Thkx



    1. I’ll see what I can do tonight all the actual code is in the post and their related gists



  2. […] some of the code that I wrote in previous posts, so have a look at Getting Started with JavaFX and JavaFX Charts look pretty good! for explanations of some of the code that will be used […]



  3. Thanks man! This actually helped me a lot. I have to plot some spline interpolation functions for an academic purpose



    1. Glad I could help 🙂



  4. Hi! is it possible that you explain to me how to plot a graph in java-fx from data in a text file?I don’t understand, how can you take back the data from your text and add them into your series to create a graph from them?



    1. You need some code to parse the file. If you are using a CSV format you could make use of a existing CSV parsing library. After you have parsed the data you can just pass it into the graphing code.



      1. I’m sorry to disturb you again, but I’m a beginner in Java, so I didn’t understand what you said. What is a CSV format? And once i parsed the file that i created, how can i pass it into the graph? Because in every site that I look at the data are in the series directly…


      2. CSV = comma separated value (e.g. 123, 456, 678)

        Using a parsing library it will read the values into a list for you, so the above example would be [123, 456, 678]

        Using this list you can then use the values to do whatever you want. In your case, to plot a graph.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: