I have this AMCharts v5 which shows a tooltip on top of a data point / bullet
DEMO
I tried to define a position
series.columns.template.setAll({
tooltipX: 10
});
Although I'm not sure this will do what I want it doesn't work. When I add this code no graph is rendered anymore.
So my question is, what is the correct way of positioning this tooltip?
(It should also work when the tooltip is positioned on the right of course)
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
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.
My GWT application consists of a "Dashboard" that has a few charts . I need to be able to hide and show charts as and when necessary.
As you can see in the jsfiddle below, i was able to hide the chart, but the invisible chart eats up mouse events(when the mouse hovers over the invisible chart the tooltips are still displayed).I need to stack another canvas on top of the chart when the chart is hidden.But since the chart is taking up the mouse events , my canvas cannot receive any. Any ideas as to how to fix this ?
http://jsfiddle.net/archerabi/vnBsx/1/
I think it's because you're only hiding the legend instead of the whole container. I changed .highcharts-legend to .highcharts-container and I think it solved that issue. See here
I am trying to have a custom tooltip for my images when the user hovers over them using jQuery Tool's Tooltip plugin. In the jsfiddle example you will see two rows. The top row is using the custom tip option, whereas the bottom row uses the regular title attribute.
As you can see, the tooltip sticks around when you mouse over them while the ones on the top row using the custom tip disappears when the mouse moves away from the image. They don't have an example in their documentation for this specific option so I am not exactly sure how it is supposed to behave.
I think it might just be a edge case in the tooltip code... they don't expect you to use the same custom content in every tooltip. But, if you make three divs with content and point the tooltips to each different one, it works as expected (updated demo):