Can't figure out how to fix CSS for 3rd party library element


Tags: javascript,html,css,plotly

Problem :

I am trying to figure out a way to override an odd default in Plotly.js

If you drill down into the class "title-group" title text for ploty.js polar scatter example then you will see that it has an automatic white text-shadow which is hideous when you use anything but a white background. I would like to be able to nullify that text-shadow, but I can't figure out the css to do it. Can it be done? I was thinking that I could somehow make a div around my plot and force all children elements to use a text-shadow with 0 width and 0 height.

So as of now I have this code:

CSS File:

div#polarScatterPlotCSS {
  text-shadow: 2px 2px #ff0000 !important;
  color: rgb(0,0,255) !important;
}

JSX File:

<div id="polarScatterPlotCSS">test
    <div id="polarScatterPlot">abc
    </div>
</div>

I can see the style applied to "test" and "abc" and even to the text in the legend of my Polar Scatter Plot, which means the Plotly.js chart is affected. The legend text never had a text-shadow though. The title and axis of the plot have the bizarre default text-shadow and are not being overriden :(



Solution :

In addition to the above CSS-based solutions, I'll point out that Plotly.js has an API for controlling this in the layout object for polar plots. This allows you to avoid using !important.

layout: {
    font: {
        outlineColor: 'transparent'  // or repeat layout.paper_bgcolor here
    }
    //...
}

    CSS Howto..

    How to make a linear-gradient to fulfill two-coloured body in CSS

    How can i make my paragraph go to the next line after a certain width

    How does Mashable.com displays/hides an element through Css?

    How to do this angle background by CSS?

    How to add a .css to a .cshtml

    How can I track down a:hover jquery source?

    How to Programatically Toggle a Zurb Foundation Switch Control, in Chrome?

    how to place div next to centered div css

    How to adjust progress bar with Jquery?

    How to force spaces between 2 elements when position:absolute with CSS only?

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    How can you hide the title tag using CSS?

    How to force a list to be vertical using html css

    How to get a property from other class in CSS?

    How to use css transform-origin to show a circle of playing cards (rectangles)?

    How to use a text file's contents in HTML as text [duplicate]

    How do I get this CSS/jQuery menu to open only on click, rather than hover?

    CSS (or jQuery): How to set horizontal scrollbar in the middle position?

    How to do line animation using CSS and SVG

    How To Sync CSS Animations Across Multiple Elements?

    nth-of-type css, how to setup it properly

    how to use first child in my code?

    How to remove a css class using jquery in a certain screen size

    How can I make a div with “position:fixed” to stay out of the screen if the window overflows?

    How to make input+label in a form appear one by one?

    How to have a box increase its size based on its content?

    How do you put in percentage based margin to a CSS grid?

    How to get Width of html control (in pixel ) from charaters contained by that control

    How can I properly create a contenteditable “Font Tester” type editor with CSS classes applied by JQuery?

    How to zoom into a specific location of an image using CSS