My problem is that I have a highchart in a div, using dotnethighcharts I am setting the height of the chart container div depending on the number of Y-Axis values. So what happens is the div expands and I scroll down the page to see all of the bars. This is working as intended in Firefox, but in Chrome when I select Print from the Highcharts options dropdown and exit the print preview window, the divs scroll ability breaks and I can't see the whole graph.
I have googled endlessly about this issue and have found nothing that might help. I wonder if there is a way to override the Chrome print preview functionality using javascript, so that when I click Print in the highchart the Chrome print window doesn't open.
Any ideas?
Thanks,
H
Let me preface with saying I have bar, pie and line charts where renderEnd all works fine.
I'm trying to modify the styling on a horizontal bar chart, which I can do fine either in the callback or renderEnd and the results can be seen in the browser. The problem occurs when resizing the window, all the custom styling is removed and the chart resets.
Testing render end with a simple console.log on all my other charts, the log fires each time the window is resized, as far as I understand renderEnd should, but on my horizontal bar chart this simply isn't the case and it only gets fired when the page loads.
Here's two plunker's of a horizontal bar chart and a vertical bar chart, if you open the console and watch the height (on horizontal) and width (on vertical) you can see that renderEnd only fires on load on the horizontal chart but fires on load and each time the window is resized on the vertical chart.
If anybody could help me out with this I'd greatly appreciate it!
Horizontal Bar Chart:
http://embed.plnkr.co/ua2IGvShEt2zZeyRTZA2/
Vertical Bar Chart:
http://embed.plnkr.co/eMS2abmdegS8hArklKdY/
Thanks.
I'm having a really strange problem with my d3 graph. It works perfectly if I never enlarge the window past the initial dimensions. The graph will shrink when I shrink the window and enlarge when I enlarge the window. However, if I try to enlarge past the the initial size (when the page first loaded), it will not enlarge. It seems that there is some maximum size set to the dimensions of the graph when the page firsts loads. Does anyone have any idea what could cause something like this?
EDIT: Another issue with my graph is that there a mouse-over tool tip which appears where the mouse is, but it always appears underneath the path line. How can I ensure that it appears above the line?
You need to use the window.onresize function so that the increased area is available for use. Here is an example of a responsive d3 chart using the resize event to update the scales.
For the circle, you need to figure out how to update the circle's coordinates to put the circle in the appropriate place.
Well although this is definitely not an ideal or elegant solution, I did figure out a way to solve this. I set initial width and height to the largest the graph to ever be and then the resize function so it would shrink the the correct size. The graph now resizes up until that very large width and height, which is never reach, so it all works great.
I have the same problem. I initialize the chart like this:
var chart = d3.select(ele[0]).append("svg").attr("class", "chart").attr("height", height).append("g").attr("transform", "translate(15,30)");
Then, on $window.onresize, I get a new height and width (data in there are correct) and try to set them:
chart.attr("width", width);chart.attr("height", height);
And this is not working. Any ideas why?
EDIT: Searching for few hours, find nothing, post the question and find a solution. Maybe this will be helpful for someone:
I changed my above code to
d3.select(ele[0]).selectAll('svg').attr('height',height).attr('width',width);
So I did not used chart to resize, I select the element again. Then it works.
I have a dynamic bar chart I created using d3.js. By dynamic I mean that both the height and number of bars is constantly changing. The problem I'm running into is that when I switch to another tab in my browser and then switch back, occasionally one or more of the bars has it's style attribute set to opacity: 0.
I've attached a picture showing the problem. Additionally, I see the same effect at http://bl.ocks.org/biovisualize/5372077 if I click update very fast.
What is causing this behavior?
Edit: Should add a relevant piece of the code:
bars.exit().transition().style({opacity: 0}).remove();
I'm using Firefox 17.0.10 on Scientific Linux 6.4.
i am working in the d3 library and also in rickshaw. in my graph i have a tool tip which displays when hovered the graph bars. the thing is that, its getting hidden in the container when the last bar is in hovered. its getting hidden in the container. only partial tool tip is getting visible. is there any way to fix it or is there any changes to be made in CSS. here is my code:
the graph which i am trying to do is like this http://code.shutterstock.com/rickshaw/examples/lines.html . but i am putting this inside a container, so that the last tool tip is getting hidden inside the container.