CODEWITHSUNDEEP
javafxjavafx-2
Kishore
Kishore

Reputation: 300

How to set border color in Line Chart

I have a LineChart graph. I want to color rectangular border of graph area.

"-fx-border-color: black transparent transparent transparent;" add border to x-axis or y-axis.

"-fx-border-color: black" add border around complete chart.

But i need border around graph area only as shown in attachment

Any help would be useful.enter image description here

Thanks

Upvotes: 1

Views: 2410

Answers (2)

jewelsea
jewelsea

Reputation: 159406

Border CSS

.chart-plot-background {
    -fx-border-color: red; 
    -fx-border-style: solid; 
    -fx-border-width: 4px;
    -fx-border-insets: -2px;
}

Gives you this:

forest

The green border around the chart plot content is what the CSS above provides.

On dotted lines

You will notice there are dashed lines and axes drawn on top of the green border. Perhaps you want the border behind those lines, perhaps you want it on top, perhaps you don't want to draw those dotted lines at all.

If it is fine to have the border behind the dotted lines you don't need to do anything else.

If you don't want to draw the dotted lines, you can remove them:

lineChart.setAlternativeRowFillVisible(false);
lineChart.setAlternativeColumnFillVisible(false);
lineChart.setHorizontalGridLinesVisible(false);
lineChart.setVerticalGridLinesVisible(false);

and adjust the insets of your bounding rectangle accordingly:

.chart-plot-background {
    -fx-border-color: forestgreen; 
    -fx-border-style: solid; 
    -fx-border-width: 4px; 
    -fx-border-insets: 0 0 0 1;
}

no lines

If you want to keep the dotted lines and draw your rectangle on top of the chart, then you can place the chart in a StackPane, run chart.lookup(".chart-plot-background") after the chart has been displayed, monitor the bounds of the resultant chart background node and add a new rectangle to the top of the stack which is bound to the chart background bounds, like in this layout bounds demo. You probably don't want to do that though.

How to do this stuff yourself

Using tools like ScenicView or the css analyzer in SceneBuilder, or studying the CSS reference guide or the modena.css file in the jfxrt.jar shipped with your JRE can help you determine the CSS rules you need.

Upvotes: 4

Thomas
Thomas

Reputation: 170

you can test that in your css file :

/* chart background */
.chart-plot-background {
   -fx-background-color: blue;
}
/* frame background */
.chart{
   -fx-background-color: pink;
}
/* border content */
.chart-content{
  -fx-padding: 0px;
  -fx-border-color: black;
  -fx-border-width: 3px;
}

Upvotes: 0

Related Questions