CODEWITHSUNDEEP
javacssoracle-databasejavafx
WillBD
WillBD

Reputation: 1919

How to color the Horizontal and Vertical Lines at (0,0) darker in JavaFX

So, I have a feeling this isn't a terrible difficult question, but I can't find the property to save my life. I'm constructing a nice Javafx XYChart (constructed, I should say) and everything is going great, I found all the help I could possibly want for the most part with the help of the Oracle CSS styling guide and made a nice looking graph (which I would post if i had 10 reputation >_> ). Now, ignoring the random parabola on it, and really everthing else, since I know how to handle those, the trouble I'm having is where the red x's are pointed, I need those axis' lines to be like a dark black, but I can't find the correct CSS property ANYWHERE you may think that the property is fx-axis-stroke, but javafx 2.0 doesn't recognize that parameter. (the link i provided is from 1.3, I believe, the newer one doesn't list most of those? O_o). my css file is as follows: 

    /* This css file holds all of the styling for the XY chart produced in the calculator.*/
    .chart-plot-background {
        -fx-background-image: url("chart-background 2.png"), url("graph-gridlines.png");
        -fx-background-size: cover, auto;
        -fx-background-repeat: no-repeat, repeat;
        -fx-background-position: 0% 0%, 0% 100%;
        -fx-border-color: black black transparent transparent;
    }
    .chart {

        -fx-background-image: url("background.png");
        -fx-padding: 15 25 15 15;    
        -fx-border-color: black;
        -fx-effect: dropshadow( gaussian , rgba(0,0,0,0.8) , 10, 0.0 , 0 , 2 );
    }
    .axis Text{
        -fx-fill: white;
    }
    .tick-mark {
        -fx-font-size: 10px;
        -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1 );
    }
    .chart-legend{
          -fx-background-color:  transparent;
    }
    .chart-legend-item{
        -fx-text-fill: white;

    }

    .chart-series-area-line { 
        -fx-stroke: white; 
        -fx-stroke-width: 2px; 
    }
    .axis-label {
       -fx-text-fill: azure; 
    }
    .default-color0.chart-series-line { -fx-stroke: azure; }
    .default-color1.chart-series-line { -fx-stroke: azure; }
    .default-color2.chart-series-line { -fx-stroke: azure; }

    .default-color0.chart-line-symbol { -fx-background-color: azure; }
    .default-color1.chart-line-symbol { -fx-background-color: azure; }
    .default-color2.chart-line-symbol { -fx-background-color: azure; }
    .chart-area-symbol {
        -fx-background-color: white;
    }
    .axis {
        -fx-stroke: black;
        -fx-tick-mark-visible: false;
        -fx-minor-tick-visible: false;
        -fx-tick-length: 3;
        -fx-minor-tick-length: 0;
        -fx-border-color: transparent;
    }
    .axis:bottom {
        -fx-border-color: black transparent transparent transparent;
    }
    .axis:left {
        -fx-border-color: transparent black transparent transparent;
    }
    .chart-series-area-fill { 
        -fx-fill: linear-gradient(to right, white, rgba(255,255,255,0)); 
        -fx-blend-mode: OVERLAY;
    }

    root { 
        display: block;
    }

Any help or insight you could give would be greatly appreciated. It's obvious to me the property must exist, but I can't seem to find it.

EDIT: I realize you can't see the red arrows that I reference above, since I couldn't post the picture, but if you can imagine two red arrows pointing at the x and y axis lines of a chart (not necessarily on the border of the chart), then that's all you need to know really.

Upvotes: 2

Views: 2885

Answers (1)

WillBD
WillBD

Reputation: 1919

So, This is solved as of about 5 minutes ago. The solution was, as I guessed, real simple. The magic CSS to make it happen: 

.chart-vertical-zero-line{
    -fx-stroke: black;
    -fx-stroke-width: 5px;
}
.chart-horizontal-zero-line{
    -fx-stroke: black;
    -fx-stroke-width: 5px;
}

And there you go, individual coloring/CSS formatting options for your vertical and horizontal zero lines. awesome.

Upvotes: 3

Related Questions