CODEWITHSUNDEEP
chartsjavafx
Kojak
Kojak

Reputation: 133

How to dynamically change line style in JavaFX 2.0 line chart?

In our JavaFX project we need a line chart. I can easy stylize the whole chart and series using CSS, but content of our chart can change dynamically:

  1. number of series and their displaying order depends on user actions and his data. Each series represents a concrete data category and the each category has its own style, eg. category A is shown as a dotted line and category B is shown as a dashed line. The chart can contain 0 or more series for each category,

  2. style of series depends on data values too, eg. series line over the average is red, and below is blue.

How to do it in JavaFX?

Upvotes: 13

Views: 22075

Answers (2)

jewelsea
jewelsea

Reputation: 159341

Update 2024

I would not advise using the lookup function for styling anymore.

Instead, JavaFX (since 17) now supports data URIs for stylesheets.

I think that the data URIs are a better solution.

You can build a CSS stylesheet string in code to dynamically completely customize most style aspects of the chart by applying the string as a data URI. This allows more robust styling using a language designed for that purpose.

To find the default chart styles so you can update them with your own (including overriding colors) in the chart and legend, review the standard JavaFX style sheet named modena.css which can be found in the javafx-controls jar of your JavaFX distribution.

If, for whatever reason either the static CSS stylesheet approach or the dynamic data uri CSS styling technique does not work for you, the lookup technique proposed in the original answer can still be applied.

Original Answer

  1. number of series and their displaying order depends on user actions and his data.

The number of series displayed and the display order can be modified by changing the ObservableList of series which you passed to the chart's setData() call. As the chart listens for changes to the list, as the backing list changes, the chart is automatically updated to reflect the changes.

each category has its own style, eg. category A is shown as a dotted line and category B is shown as a dashed line.

This can done by determining which series in the chart is in which category, looking up all nodes related to the series via the node lookupAll(cssStyleSelector) function and applying a new custom style to the series which matches the style for the category. Dotted and dashed lines can be styled via css by setting the -fx-stroke-dash-array css property. Alternately, rather than a lookup you can dynamically change the css styleclass assigned to nodes via modifying the ObservableList returned from getStyleClass().

style of series depends on data values too, eg. series line over the average is red, and below is blue.

This is similar to how the dotted and dashed lines are displayed, but instead the color of the lines are modifed by the -fx-stroke css property and the modification depends on the average values calculated for the series.

To demonstrate the above points, I created a sample solution for this question here: https://gist.github.com/2129306

Upvotes: 11

Guz
Guz

Reputation: 307

I did it like this, thought it was pretty handy. Note: This apparently works on LineCharts but not ScatterCharts.

 Series<Number, Number> series = new Series<>();
 ...
 series.nodeProperty().get().setStyle("-fx-stroke-width: 1px;");

Upvotes: 4

Related Questions