CODEWITHSUNDEEP
csschartsjavafx
Yehoshaphat Schellekens
Yehoshaphat Schellekens

Reputation: 2385

example of styled javafx chart with CSS code

So I've been working for a while on a JavaFx application (for internal use of my company), which works great, but whenever I'm showing it to my colleagues, i always get the response "the application is great, but why is it so ugly?" , so i wend to look for examples of styled Javafx charts, and except of the Oracle documentation, i really found nothing, for buttons Oracle published a very nice post- here, but nothing similar for JavaFx charts.

I already looked for examples on Google's image gallery, but except for Oracle documentation, there's almost nothing.

Could some one be kind and post a nice CSS code that would end this embarrassment? I'm attaching my current CSS code, Unfortunately i don't have enough reputation for posting images (snap of the application). Any suggested Modification of my current CSS will be great just as well.

  #appContainer {
    -fx-background-color: linear-gradient(to bottom, #464646, #5f5f5f);
     -fx-spacing:30;
}

.button {
    -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);
    -fx-background-insets: 0,1,2,3;
    -fx-background-radius: 6;
    -fx-padding: 12 30 12 30;
    -fx-text-fill: white;
    -fx-font-size: 12px;
    -fx-spacing:30;

}

.button:hover{

    -fx-background-color: linear-gradient(black, white);


}
.combo-box {
    -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);
    -fx-background-insets: 0,1,2,3;
    -fx-background-radius: 3,2,2,2;
    -fx-padding: 12 30 12 30;
    -fx-text-fill: -fx-text-base-color;
    -fx-font-size: 12px;
}

.combo-box:hover{

    -fx-background-color: white;


}

#buttonMenuContainer {
    -fx-background-color: linear-gradient(to bottom, #737373, #595959);
    -fx-padding: 10px;
     -fx-spacing:30;
}

.chart-title {
 -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-text-fill: #F8F8F8 ;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
 }

.chart-alternative-row-fill {
    -fx-fill: transparent;
    -fx-stroke: transparent;
    -fx-stroke-width: 0;
}

.chart-vertical-grid-lines {
    -fx-stroke: transparent;
}
.chart-horizontal-grid-lines {
    -fx-stroke: transparent;
}

.axis {
  -fx-text-fill: #4682b4;
}

.chart {
    -fx-padding: 10px;
     -fx-background-color: 
        #000000,
        linear-gradient(#7ebcea, #2f4b8f),
        linear-gradient(#426ab7, #263e75),
        linear-gradient(#395cab, #223768);

            -fx-text-fill:  white;
}

.chart-plot-background{
-fx-padding:0px;
-fx-font-family: Verdana;
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
}
.chart-content{
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-padding:30px;
-fx-border-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-border-width: 5;
-fx-border-insets: -5;
}

.CategoryAxis{
 -fx-color:black;   

}

.chart-legend{
   -fx-background-color:white;

}

.axis {
    -fx-font-size: 1.4em;    
    -fx-tick-label-fill: black;
    -fx-font-family: Tahoma;
    -fx-tick-length: 20;
    -fx-minor-tick-length: 10;
}

.chart-series-line {    
    -fx-stroke-width: 2px;
  }

.default-color0.chart-series-line { -fx-stroke: black; }
.default-color1.chart-series-line { -fx-stroke: white }
.default-color2.chart-series-line { -fx-stroke: blue }

default-color0.chart-line-symbol { -fx-background-color: black, white; }
.default-color1.chart-line-symbol { -fx-background-color: white, white; }
.default-color2.chart-line-symbol { -fx-background-color: blue, white; }

.chart-legend { -fx-background-color: linear-gradient(gray, white);
 -fx-font: Arial;
-fx-font-size: 20px;
    -fx-text-fill: #F8F8F8 ;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );

}

.pane {
    -fx-background-color: #8fbc8f;
}

Upvotes: 0

Views: 5394

Answers (1)

sirolf2009
sirolf2009

Reputation: 868

You can lookup the default styling in caspian.css, if you want to know what's possible to style. As to how you should style it, it depends on what you find pretty, so I'd advise you to look up a chart on google that you like and reconstruct it.

Upvotes: 1

Related Questions