I have the following SVG:
The legend block on the right top (highlighted by the red rectangle) is a group element containing legends for the line charts on the left.
The problem I am facing is that the number of these legends are dynamic and are added one below the other. The SVG has a fixed height (as of now) in pixels. So, my worry is that after a certain point these legends will overflow the enclosing SVG element.
Is there a way of adding a vertical scrollbar to the legend group element so that any number of legends can be incorporated? Or should I, in some way make the SVG height dynamic according to the number of legends?
What is the best way to tackle this problem?
Related
I am using amcharts and I have a grid layout on my page to store 3 elements: List, map and radar chart.
The radar chart doesn't display properly for some reason. It doesn't matter what dimensions and sizes I give to the parent div, it doesn't display the radar with all the labels. It always cuts off some of them.
I couldn't find anything about it in documentation or in here. Here are the results of my stylings: first, second third.
After unsuccessful attempts at altering CSS, I fixed it by adding a title of the chart at the top and label with opacity 0 at the bottom using charts prototypes in JS. I couldn't find any solution in documentation, but to set fixed maxHeight of the radar in pixels. The solution with pixels wouldn't work well with CSS-Grid.
fixed container
When setting overflow:scroll to have scrollbars instead of panning in treechart, facing strange issues. On folding the top rood node cells, the node going behind outline container and not centre aligned. The outline container is fixed in position and always visible.
Graph.fit is not the option which i am looking for, is there any way i can resize the graph container according to the size of graph?
Expectation is to call a method, so that the folded cell should be present in the place where it was got clicked or at-least come to the centre and visible.
Not full answer, but if you want to resize graph container, there is doResizeContainer method. It accepts width and height as its parameters
I am having difficulty positioning my c3 chart. I have three divs in each row and attaching a separate chart to each of them. However, as you can see there is a lot of gap between the top and the bottom row. Any pointers how do remove this? I have tried positioning the div but it does not work.
Also, in the top row, my charts appear at different positions. I am unable to align them.
I am trying to get the NVD3 tooltip to go above all other divs. The problem is that I have three charts in a row, and very large tooltips that spill out of their div. I can set the z-index on one or the other side, but one will always be below another.
For example, if I set the center div to have the highest z-index, then the tooltip generated from the left or right side is cut off in the center area, and so on.
Changing the z-index of the tooltip doesn't have any effect, as it's ultimately a child of the respective chart. How can I make it stay above everything?
Easy fix was to add a CSS3 hover selector to the divs that increased the z-index.
I have a pack layout with multiple levels (depths), out of which a few first ones are made not visible (just like in the example: http://bl.ocks.org/mbostock/4063269:
... where the root node is hidden).
However, the scaling works by fitting ALL the circles in an svg container, not only the visible ones. This leads to lost space if a few top-cirles are made invisible...
What would be a good way to rescale the layout to fit only the visible circles in the container? I thought about checking all nodes for extreme x/y coordinates and rescaling based on that...