Help me figure out the css for the arrow + values + units section of this "graph"
The arrow pointing to the graph is absolutely positioned in the correct place depending on the value but I dont know how to make the top part work using css.
9 circles in a 3 x 3 grid with random lines on three of them connecting them to other circles (image)
I'm trying to more of less re-create the image above using react. The circles are div blocks and I have no clue how to go about drawing the lines that "connect" one circle to the other.
I tried using react-lineto, but it's simply not rendering anything when I use it. I can use the hr tag and use position absolute or something and just play around with where it's placed by toying with top and left props, but I don't think I'd be able to create diagonal lines.
Open to whatever packages or strategies you guys think could help me connect two dots (which are styled div blocks) with a line that could be vertical, horizontal, or diagonal.
Below is what I added to use react-lineto that didn't work. Straight from the documentation. I don't care to get react-lineto working as much as I just care to be able to accomplish this task in general.
<div className="A"></div>
<div className="B"><div/>
<LineTo from="A" to="B" />
Im trying to add border like in the image to flex charts. I used vertical and horizontal Axis renderers but that method id not proper solution. Guys do you have any idea to achieve this one?
Just put it inside a canvas and give it that colour and required padding.
how can i create a ribbon like this that sits on corner of my boxes and it is rotated too with css and without images.
i know that exits some tools and tutorials like this and this that makes ribbons easily with css.
but all of those are horizontal type while i want to create a rotated one.
Once you follow those tutorials to create a horizontal ribbon, use CSS3 Transform (Rotation) to rotate the ribbon: http://davidwalsh.name/css-transform-rotate
http://jsfiddle.net/R6jMH/ Have a look
I have a Flex3 LineChart component using an CircleItemRenderer and the datapoints are being cut off because they are too close to the edge. Here's what it looks like:
http://img29.imageshack.us/img29/3850/chartx.png
As you can see, the circles on the left and right sides are being cut off.
How can I make the LineSeries area, plus the horizontal labels, narrower so it fits in the chart area?
Thanks!
I had the same issue and was able to resolve it by setting the clipContent attribute in the chart tag to false. I found this solution on Amy's Flex Diary.
You might want to set the maximum and minimum values in your LinearAxis in the horizontalAxis object. Check the API for more information: http://livedocs.adobe.com/flex/3/langref/mx/charts/LinearAxis.html
The Line Chart determines automatically these values to fill all the elements in the screen. You might want to change these values so the graph has some space at the sides.
You can set the padding property on the horizontalAxis and verticalAxis child objects as well...
Adjust the mask on the chart component.
I got this to work by changing the type from LineChart to ColumnChart. I still had all of the same axis definitions including Line Series. The results are the same Line graph, but more centered on the graph instead of touching the edges. None of the other padding or gutters were what I was looking for.
I got d solution.
create creationComplete event in LineChart
edit horizontalAxis's padding you want
e.target.horizontalAxis.padding = 0.2;