Rickshaw: Changing colors of X-Axis Labels - css

By default the labels are all a dark gray, I've tried to override them using CSS multiple ways.
How do I change the label's color on render?
Or how do I change the color in the SVG output?
I've looked everywhere and have found similar titles but different meanings. Love how manipulatable this graph is, but the label text color is a must for me.
Thanks in advance.


Finally found the way to do it. Gotta use JS to overwrite the attributes.
After the graph.render() function use these:
$('.x_ticks_d3 text').css('opacity', '1.0');//fix text opacity
$('#x_axis text').css('fill', 'white');//text color
$('.x_ticks_d3 .tick').css('stroke-width', '0px');//text smoothing
$('#x_axis path').css('opacity', '0');//remove line or
$('#x_axis path').css('stroke', 'white');//change line color
This got everything to be white for me, and was able to remove the lines also.

Related

How to change the background color in kableExtra?

Looking for a way to set the background color.
I know how to change single elements but couldn't figure it out how to do it for the whole html document.
Any suggestions ?

Dash plotly / CSS. customize marker style - Gradient color for bar chart

I would appreciate it if someone can help me.
I would like to have a gradient for my bar chart instead of one color.
something like this:
go.Bar( x=df2.date,y=df2.ans,yaxis='y1', textposition='auto', marker={'color':'##7FFF00' )
I have also tried to do it with
marker={'color':list(range(-10,10))
but it gives me a general gradient from right to left.
I have also tried to add css to asset:
.grad{ color: linear-gradient(to right, red , yellow)}
but I couldn't manage to use it.
Looking forward to your help. Thank you

You can add 'colorscale': 'YlOrRd' to your marker dict!
go.Bar( x=df2.date,y=df2.ans,yaxis='y1', textposition='auto', marker={'color':'##7FFF00', 'colorscale': 'YlOrRd'})
colorscale also have these options (as strings like above): Greys,YlGnBu,Greens,YlOrRd,Bluered,RdBu,Reds,Blues,Picnic,Rainbow,Portland,Jet,Hot,Blackbody,Earth,Electric,Viridis,Cividis.
Check out this link for more info https://plotly.com/javascript/reference/

Labeling shape on plotly js

I've been trying to add different colored shapes to the background of plotly.js. However, I also want to be able to label them somewhere so the user knows what color has what meaning. How can I do that?
The first example on here is basically what I've got so far:
https://plot.ly/javascript/shapes/

Change TimeSpanAxis label color OXYPLOT?

I am able to do formatting except choosing the right color for my label font. Does any one know how to change the color of any axis's label using OxyPlot in Xamarin.Forms ?

OP found the answer by himself: The color may be set by assigning a OxyColor to the property TextColor of any PlotElement.
(Just answering to get this question out of "unanswered")

How to modify c3.js legend's text color

I am trying in vain to change the font color of a c3.js graph's legend.
With chrome's style inspector, i could change for example the font-size of the text but not the color.
Attaching a screenshot with the above mentioned properties (font-size and color).
Any hints please?

It is not color that you should change, instead change strokeor fill. See this tutorial for an explanation and difference between stroke and fill.

Add CSS styling for the legend item in your css file. Use fill instead of color because css property color is not valid here
.c3-legend-item {
fill: #9fabb1;
}

Resources