I've searched the way to color the background of axis in my chart. Rechart doesn't provide such an option, so we need to find some way to overcome this
There was such a question and I provided the answer
Is there a way to set Background Color of XAxis
Answer can be seen on https://codesandbox.io/s/highlight-zomm-line-chart-forked-o18fe
In codesandbox it is fine in any scale.
But if I apply that code in my browser and resize the window then those rectangles moves outside of the axis. Is there any way to fix it?
The fill property can be used to set the axis background color.
<CartesianGrid strokeDasharray="3 3" fill='red'/>
The result can be seen here:
Related
I know how to change background color in slide,
but i can't find how to change background color in chart.
Default Chart
I use a default code from PhpPresentation
Any one can help?
finally i found the answer!
just use this code :
$shape->getFill()->setFillType(Fill::FILL_GRADIENT_LINEAR)
->setRotation(90)
->setStartColor(new Color('FF000000'))
->setEndColor(new Color('FFB1B1B1'));
Below this code
$shape->setFill($oFill);
I am trying to add a movable scale or axis inside a plot. For instance: in this example of stacked plot: Click-to-view
I want to include a movable y-axis scale so, if we hover the graph and put the mouse pointer on the beginning of the orange color of any bar, the a-xis will begin from that bar. (Specifically, moving x=0 line.)
I meant something like this example (of d3).
https://observablehq.com/#d3/index-chart
But, here I want to change the value of x-axis by moving the line. Is it possible to do it using vegalite? If somebody has any similar example in vegalite, can you refer it?
Thank you!
AFAIK, there is no animation in Vega Lite. However, you may check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts
I am trying to visualize a filter in my stock chart by graying out data points which are affected by the filter. I'm using axisGuides on my valueAxis in order to achieve this. However, I also have axisGuides on my categoryAxis and unfortunately, these now disappear beneath my horizontal axisGuides.
Is there any way to change the z-index of those guides? Or does anybody have a different solution?
I have adapted an official amCharts example to show what I mean:
http://jsfiddle.net/wq97ujne/
I'm setting plotAreaFillColors": '#ababab' on my stock panel and fillColor: "#ffffff" on my valueAxisGuide.
I would like for the vertical guides to be drawn in front of and not behind the white area.
You need to set above: true for the categoryAxisGuides.
If I add this style (.style("opacity", .2) to a rectangle the gridlines appear in front of the rectangle, in this example http://bl.ocks.org/bunkat/1962173. Is there a way to bring shape to front or send gridline back?
The elements in an SVG are displayed in the order in which they are added to the DOM. That is, anything you want displayed on top of everything else should be added last. In your case, you need to add the rectangle after adding the grid lines.
Here's a jsfiddle to play with dom order and opacity:
http://jsfiddle.net/laurieskelly/9jr65/
If you back the shapes with identical shapes of the background color, the grid lines will not show through.
Simpler solution: do the shapes really need to be transparent?
I checked the docs and all I could find was to set the stroke but I need the whole xAxis background and not only font color.
#Renaldo Balaj Well, you could add an svg element to your chart like here
https://codesandbox.io/s/highlight-zomm-line-chart-forked-o18fe
But there is an issue I am struggling with: on codesandbox on resize all is ok, but in my browser those rectangles are moving out of borders while resizing, can't make them attached to axis