When I put my chart inside of Bootstrap's .table-responsive the chart doesn't fill the entire td. Here's a jsFiddle of the problem. As you might see I've set the width to 100%, and this worked in the grid.
There seems to be a strange bug aswell, when I open the chrome console with "Inspect element" the problem is solved (happens in the jsFiddle aswell).
How can I make the chart fill the entire <td> by default?
You'll have to set the width setting of chart after initialization. After initialization, Highcharts only adapts on a resize event (try it out, if you resize the window it will change width), so you might want to trigger an resize event.
Here is a jsFiddle (ab)using a resize event: http://jsfiddle.net/b9DMn/1/
Highcharts does automatically gets the width of its container when its creating its chart, but if you put a breakpoint there you'll see that the table cells are still divided equally at that point in time. In fact, it is the chart that triggers the table to grow the right cell. If you can fixate the cell width, that would probably help too.
Here is a jsFiddle fixating the width of the cells, so they don't grow and shrink when content gets added: http://jsfiddle.net/b9DMn/2/
Related
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 working with charts that must resize dynamically. On calling the chart.setSize(containerWidth, containerHeight, boolean) method everything seems to resize appropriately except the svg element "highcharts-series-group". This element seems to remain fixed at the size that it had when the chart was created. The end result is that the parts of the graph that are outside of its "view box" are hidden.
Below are two images showing demonstrating this:
1: I minimized the screen for the initial creation of the chart
2: In the second image I have fully expended the browser further and applied the chart.resize() method which seems to work except as the image shows the "highcharts-series-group" svg element of the graph has not changed with this resulting in most of the group being hidden as it resizes beyond the "highcharts-series-group" boundaries.
Am I missing something?
EXTRA INFO:
The only work around I have managed right now for this is to destroy the chart and to recreate it whenever the window resize event is triggered.
This would be all good except this gives a bad user experience as the chart "blinks" when it is destroyed and then created.
The issue was the version. My organization was using version 2.0.2. Just updated to the latest (5.0.5) and the issue vanishes.
Im having this issue in Extjs grid editing. When I tab from a dropdown editor to a textarea editor, the textarea editor jumps down the screen, away from the cell I should be editing:
I have no idea how to fix this. It only happens 1/2 of the time, so I believe there is some race condition, but Im not sure. Ive spent a lot of time debugging and stepping through the editing code and the textarea starts out in the grid cell, but some event fires or something and it then moves.
I found the problem, but I don't think there is a good solution to it. When I complete the edit by clicking tab, new value is put in the grid cell.
The grid row height might change, which will cause the grid viewport size to change (since i am not using a scroll bar.. the grid height grows and shrinks dynamically).
The grid is in an iframe, and i attached a listener to the grid resize event to change the iframe height to be the size of the grid height, this in turn caused floating elements (such as a cell editor) to be repositioned.
So my problem is that i want the iframe to grow with the grid, which grows and shrinks (by a few pixels) as cells get edited. But this causes the floating element to jump.
I'm using Highcharts column chart and I want it to be 100% width responsive chart. The container is a simple <div> with no any formatting. When the document loads, the chart is always fixed width 600x400px size. If I resize window or switch to another browser tab, the chart fills the width and becomes responsive full width chart just like I wanted. If I reload page, it's fixed width again. I tried setting width to both container and chart, however, nothing helps. If I move the container div one level above the parent div, It works. How to make the chart become full width on page load also?
Thanks
Chart's width is taken from jQuery.width(container), so if you have chart in some hidden tabs or something similar, width will be undefined. In that case default width and height are set (600x400).
I know this is an old question, but I ran into the exact same issue and found another solution that works great.
As of Highcharts 4.1.5 (could be in older versions as well), the chart object has a reflow() function. View the documentation here.
reflow ()
Reflows the chart to its container. By default, the chart reflows automatically to its container following a window.resize event, as per the chart.reflow option. However, there are no reliable events for div resize, so if the container is resized without a window resize event, this must be called explicitly.
Hope it helps someone else.
I am using the default example of the Kendo UI dataviz bar chart. When I zoom into the page, the graph starts to overlap over other elements on the page. Is there a way to make sure that everything in the div containing the graph does not overlap onto other divs. This is a huge problem as when viewed on a tablet, it is overlapping other elements.
How are you "zooming" in?
The KendoChart gets a fixed width when it is created - it's just an SVG. I'm not aware of a means to animate resizing it - you could change the height and width manually, or possibly just redraw the chart, but I imagine that would be fairly intensive and wouldn't animate well.