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.
Related
in this page https://ticr.live/ticker-demo.php
i am showing the data generated roughly in the last 15mins, in a TradingView chart widget.
I wish that all points are visible inside the chart, without the need to scroll the chart left horizontally to see the past values, in case there are many points.
So the whole chart should "fit" exactly the container div.
How is this achieved?
Thanks
Yes, you can fit all your data inside the chart by calling chart.timeScale().fitContent() method.
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
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 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?
I need to enable the horizontal scrollbar when I have more Pie Charts than are visible in the container. I am able to do this with other chart types by using Highstock.js and the following:
scrollbar: {
enabled: true
},
This doesn't seem to work with multiple Pie Charts. It will squash the Pie if it doesn't quite fit(which I don't want either), but any overflow Charts are hidden.
See my fiddle:http://jsfiddle.net/4pn5J/5/
The scrollbar only works with stock charts. To get around this, why not make 3 divs inside a "master" div and allow the scrollbar on the div container itself?
EDIT:
Sample using divs and css. Yes, you are using highstock.js but scrollbar is not available on PIE-based charts. Since the xAxis is essentially just he radius of the chart itself.
EDIT2:
Sample using single div container. You will need to fiddle with the chart sizes. Again done with CSS.