I am building an app with Vaadin 14.4.8 and I have a question about the pie chart. When I am selecting a tile in the pie on mobile, the halo appears and stays visible. In the desktop variant the halo is only visible on mouse over.
I am looking for a way that the halo stays visible, when a tile is selected on mobile and desktop by the user and through a listener.
Can I set chart behavior always to mobile or is there another possibillity?
I did find a solution directly in highcharts but I couldn't apply this to the Vaadin charts -> Highcharts, set halo on select in pie chart
Thank you in advance your answers.
The effect you are seeing on mobile is still just the same hover effect like on desktop. On mobile, with touch events, there is no equivalent of a "mouse leave" event, so the slice will stay hovered after tapping on it, and will only disappear after tapping somewhere else.
However the charts have an actual selection mode, which you can enable by:
plotOptions.setAllowPointSelect(true);
See here for the plot options documentation.
Once that has been enabled, clicking on a slice will select it, which moves the slice slightly outside of the circle. See following example, where Neptune is selected:
Related
I’m working on a page where we have no access to the platform code (think page builder).
I’ve used jquery to launch some tooltip targets when a trigger is clicked, and because of the limited platform access I use jquery to traverse up the DOM and bump the parent div’s z-index up high so the tooltip sits over the button.
On either second click or timeout the z-index goes back to 1 and tooltip goes away. All this works fine on desktop.
iOS however, shows the tooltip and if you scroll down it almost immediately drops the z-index down so it goes behind the buttons.
Has anyone encountered this annoying behaviour? And is there a workaround?
I’ve tried forcing !important on the tooltip, no luck. I also tried applying transform 3D 0, transform-z, with no luck.
I remember there used to be a View/Edit toggle button on the top-right corner of a a Chart in Google Sheets. The View mode would allow me to hover over a datapoint, e.g. in a bubble chart, and get the associated values for it.
I just checked this morning on a fresh spreadsheet:
https://docs.google.com/spreadsheets/d/14IpjIjHrP3PytDsaZu56_54hxkSILq1fTyTbOsCu5s8/edit?usp=sharing
And I don't see the Edit/View options anymore. How can I hover over the bubbles in the chart and see their associated values?
EDIT: I tried this both on Chrome and Firefox, same effect.
There's no longer an Edit/View button.
There is a View mode which shows values when you hover. This is the mode I'm currently getting when I click on your link, since you haven't given editing privileges to the public. You can also view it by publishing it to the web and using the generated link. Go to File -> Publish to the web.. Make sure only the appropriate people, if any, are given access, and to the required sheets only.
There's also an advanced edit.. mode, which you get by right clicking on the chart or clicking that tiny arrow at the top-right corner of the chart. This mode also shows values when you hover.
Edit 28th May 2017:
The View/Edit button is once again available, this time on the right side.
I'm new to Highstock and I was playing with the samples, but I saw that the navigator isn't working in any of them, i.e. https://www.highcharts.com/stock/demo/candlestick-and-volume (tested in FF and Chrome on W10).
I guess the navigator allows to modify the windows size of the chart, zomming in and out over the data. They show the left-right arrows on mouse hover but they can't be dragged.
Thanks in advance.
I'm currently using 3.6.0 and I'm finding that, as features are placed from left to right on the map that features further to the right seem to be offset from their icons - if I place my mouse directly over the graphic feature the mouse cursor (which is wired up to forEachFeatureAtPixel()) does not change until it is moved to the left of the feature icon. On the left of the screen they line up, but it drifts going right until features on the right are completely out of sync.
Any ideas? I thought it may be the library, but I've just rolled back to 3.4.0 and it was the same.
Could this be layout outside of the map canvas bumping items across the screen?
I had the same issue for about a month but in my particular case the problem originated because I was rendering the map while showing a loading panel in front of it wich had a style that caused the web browser to display the scrollbars.
Upon load completion, hiding the loading panel also removed the scrollbar but somehow the map itself didn't refresh properly.
All I had to do was to force map to recalculate the viewport size using the map.updateSize()
http://openlayers.org/en/v3.14.0/apidoc/ol.Map.html#updateSize
Is there a setting for highcharts tooltips where you can set it to display on click versus hover?
I have seen a lot of people discussing the tooltip staying on click but then there is still the hover present. Is there a way to disable the hover and use only click?
There is not a setting for that in Highcharts currently.
There is a feature request for this functionality here: http://highcharts.uservoice.com/forums/55896-general/suggestions/2607304-allow-the-tooltip-to-appear-when-a-point-is-clicke
Feel free to add your votes and comments.
UPDATE:
I have started using the jquery UI dialog for this purpose.
I disable the tooltip in Highcharts, and add a click event to the point in the plotOptions.
In that click function I call an external function, sending it the point object, and build my tooltip within the dialog.
http://jqueryui.com/dialog/
http://api.highcharts.com/highcharts#plotOptions.series.point.events.click
You could also use Highslide for this purpose, and keep it all in the family.
http://highslide.com/
Working example:
http://jsfiddle.net/jlbriggs/LHZ3E/embedded/result/
Adding for those who has problems like me with useHTML: true and wants to display tooltip only on click and not on hover and wants to have only one tooltip on screen.
Here is a fiddle.