I have the highcharts bubble chart inside an overflow:auto div with scrollbars. This is because the graph is roughly 2000px per 5000px. This means it's impractical to display on a webpage without scrollbars.
The problem I am having is that when the user scrolls off to the right and down, you cannot see the axis any more so the entire graph loses all sense without reading the tooltip.
Is there a way to allow the axis to float above the graph and move with it?
Edit: The following is an example using the standard Highcharts bubble chart. The idea being that when the user uses the scroll bars, the axis should "float" with them and remain in the same position. The content should be the only thing that moves. That way the user can still see the X / Y axis even when they scroll.
http://jsfiddle.net/82ugmcnt/
Edit: The accepted answer allows for horizontal scrolling as I requested in the original question. The possibility for vertical scrolling does not exist yet in Highcharts/Highstock.
You can use highstock.js which has built-in scrollbar.
scrollbar:{enabled:true},
xAxis: {
max:50,
opposite: true
},
Example: http://jsfiddle.net/82ugmcnt/1/
Related
Does anyone know if it's possible with Chartist.js to ensure a horizontal bar chart takes full width of the chart container?
If you look at the screenshot you can see that the gray bar does not take up the whole width, based on the examples I would have thought that the highest value data point in the series would be scaled to fill to the end of the chart (and the axis scaled accordingly).
See screenshot.
A little late but I spent the afternoon trying to achieve the same thing with some success.
In short, I created a simple plugin that, on creation, dynamically adjusts the bar width based on the stepLength property.
https://jsfiddle.net/traviss0/gg1oj35x/
The examples look fantastic for pan/zoom of inline SVG at:
https://github.com/ariutta/svg-pan-zoom
I'm trying to figure out how to zoom inline SVG only in the horizontal, while leaving the vertical axis static.
Currently there is no way to zoom only on one axis.
You can see this thread for the discussions about that. There is a link to an attempt to implement that, but I don't know what's its status.
I'm using NVD3 1.8 for charting and I've implemented a custom tooltip because our visual design department didn't like the one that the library came with. I've been able to implement most of the design, but I have one problem:
The arrow on the tooltip needs to point to the guideline whether it's on the right or the left. I made this arrow using CSS and I can easily add a class to move it to the other side, but the problem is figuring out when to apply the class. When the user's mouse gets too close to the right side of the screen, the transform: translation() value of the tooltip is changed so that it appears to the left side of the mouse rather than the right.
This is done based on the width if the tooltip, NOT a static distance from the right edge of the screen (I know this because my tooltip dynamically resizes based on its contents, and a tooltip further to the left can sometimes be flipped left by having larger number values). I don't know how to access the "flip" information programmatically, as it seems to make this check after the tooltip is already rendered. How can I get around this conundrum?
Is it possible to just decide that if the guideline is on the right side of the screen then make the tooltip go to the left, and if it's on the left side make the tooltip go to the right?
You could perform a calculation where you just take the width / 2. This is what I do whenever I have a tooltip. I also move the tooltip below the cursor when it's on the upper portion of the page and move the tooltip above the cursor when it's on the bottom portion of the page
Hope this helps.
I'm having what appears to be a highcharts sizing issue. The width of the highcharts svg, and the containing div are the same, and they are sizing correctly (going from 525px to 530px when I bump the window). However the labels act correct after the resize, but not on page load.
Here's what the chart looks like on page load:
You can see the issue with the xAxis labels.
and after I size the window BIGGER (manually with my mouse):
note that I am using angularjs and the angularjs highcharts directive found here:
https://github.com/pablojim/highcharts-ng. I don't think that's related however.
any help you can provide is much appreciated!
Thanks
Probably the labels overlap and Highcharts removes them automatically. I suggest you to give a look at the Highcharts API.
Overflow
How to handle overflowing labels on horizontal axis. Can be undefined,
false or "justify". By default it aligns inside the chart area. If
"justify", labels will not render outside the plot area. If false, it
will not be aligned at all. If there is room to move it, it will be
aligned to the edge, else it will be removed.
Changing the overflow property to "justify" may fix it, but it may not look good. Give it a try.
Another suggestion to fix this, is to give it a fixed size of lines to display the labels, with the staggerLines property. Check this Fiddle and see it fits to your problem.
I'm using jqBarGraph and I've run into a somewhat simple but problematic issue. I'm limited in the amount of space that I can display the graph (~550px width, unlimited height), and can have up to 50 items being displayed at once. Because of this, the bars themselves will appear quite small (~5px thin) which isn't easy to view. So, an easy solution would be to display the bars stacked horizontally (bars stacked top to bottom, reading left to right). This isn't an option in the current release, has anyone experienced this before and have a simple fix, or would anyone know how to create an option for this?
Have you looked at jqPlot instead? http://www.jqplot.com