CODEWITHSUNDEEP
chartsjavafx-2legend
Paul Marshall
Paul Marshall

Reputation: 113

Offsetting a chart legend/Layered charts with JavaFX

Short version: is it possible to offset a chart legend in JavaFX, i.e. left align a bottom legend or shift the legend 20px off of center? It does not look possible with either Java code or with CSS, from looking through the JavaFX documentation or just general Google searching.

Longer version:

Let's say that, for example, I have a chart showing 3-phase AC power utilization on say, 4 different breakers. I want to show both the total percent utilization of the circuit and the percent that is being used of each individual phase on "one chart". So I take two different bar charts and stack them ending up with something like below:

Example chart

However, because the overall utilization and the phase utilization are in different charts, they have different legends. Because the phase chart is on top of the overall chart, we can't see the legend for the overall utilization chart. So then, is it possible to offset to two legends so that both are visible, as in the following image (it's photo-edited):

Example of desired result

Is this possible, or is this just a dumb approach, as in, is there a better way to get this or other similar result? Any thoughts would be appreciated.

Upvotes: 1

Views: 1459

Answers (1)

Uluk Biy
Uluk Biy

Reputation: 49185

Not so elegant, hard coded but straightforward way seems again to play with CSS:

 /* The default css of chart legend in caspian. */
.chart-legend {
   -fx-background-color:  #cccccc, #eeeeee;
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px;
}

/* We customize the above default background-color to transparent for 
   the chart legend on the right side, in our own CSS file. */
#my-legend-on-the-right-side .chart-legend {
   -fx-background-color: transparent;
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px;
}

/* Then we customize the legend on the left side by padding 
   it to the left while its background covers the legend on the right. */
#my-legend-on-the-left-side .chart-legend {
   -fx-background-color:  #cccccc, #eeeeee;
   -fx-background-insets: 0,1;
   -fx-background-radius: 6,5;
   -fx-padding: 6px 300px 6px 6px;
}

Use them by setting ids:

barChartTotal.setId("my-legend-on-the-left-side");
barChartPhases.setId("my-legend-on-the-right-side");

Upvotes: 2

Related Questions