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


Tags: java,css,oracle,javafx

Problem :

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.



Solution :

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.


    CSS Howto..

    How to blink a text on button in IE ,chrome etc using JQuery or CSS

    How to put
      around image in css

    How can I vertically center this css/javascript based modal dialog?

    How to add a CSS table next to my google map?

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    How to resize an image in pure HTML/CSS while keeping its proportions?

    How to get CSS styling to shown on page? [closed]

    How to fix transparent div child in parent?

    How to make an svg masked image compatible with Internet Explorer

    How to apply css to an iframe

    How to set the added elements by jQuery to the behind of other element

    How to make responsive video container div?

    How to create double, dotted underline for text in css

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How can you fix the height of an element in IE 6, and allow hidden content to be scrolled into view?

    How can I indent all text in a paragraph except the first line?

    How * tag can be used in CSS?

    how to trace this computed CSS value in firefox inspector?

    How do i apply fadein and fadeout effect for this?

    How to center a textarea using CSS?

    contenteditable does not show pseudoselector :before in safari

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    how can I combine button with input?

    How to disable the 'save image as' popup for smartphones for

    how to make a space-keeping column use css and table tag

    How to style responsive table to make table like list?

    how can I make div have auto height according to content

    Show notification counter with bootstrap

    How to style 3 (div) boxes using CSS