0

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.

an image of the halo og the selected tile

Anna Koskinen
  • 1,362
  • 3
  • 22
Martin
  • 3
  • 1

1 Answers1

1

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: enter image description here

Sascha Ißbrücker
  • 790
  • 4
  • 5
  • Thank you for your comment. The hover effect does look better but I have a working solution with your help :). Also I can select a tile with `setSliced` from an external listener. – Martin Jun 10 '21 at 11:49