Streaming live at 10am (PST)

Pie chart with hover effect


#1

Example

Hi, I have a client who would like something like the example above. After testing some in webflow I realise to get the hover effect over the pie itself, I would need some custom code.

Does anyone have some tips and examples for how I can solve this in webflow?
I would appreciate it a lot! :slight_smile:


#2

This is definitely EDIT: maybe but I don’t know how! possible with Interactions 2.0

I’ll try and do an basic example and share so you can see the workings.


#3

So this is a REEEEEALLY simple version, I think with SVG for sections and correct positioning you could do this, reasonably easy?
You can hover over top left pie section, or section 1 text to see.

http://magicians-sandbox.webflow.io/3-141592654

https://preview.webflow.com/preview/magicians-sandbox?preview=454975d6856e10b34ae69debfe0f883f
(choose 3.141592654 (Pi) page. See what I did there? :joy:)

There is also a CodePen I found, which could be easily styled to match your site with some basic css styling (just editing what’s already there)

Or something slightly different is this cool pie chart by @DigtalCrusader


#4

haha :smiley: Thank you for the 3.14 page! Nice touch :smiley:

The problem starts if you want to cut on of those slices in, lets say 4 again. Or if one slice is more then 25%. Then the div overlap and you can’t choose just one. If you know what I mean?

I think the Example page uses svg, but not sure how I would implement it.


#5

Haha, a last minute edit :grinning:

Yes, I see what you mean, you could display the sections, but wouldn’t be able to hover over that section.

This looks the closest I can find.
https://www.jqueryscript.net/demo/Responsive-Pie-Chart-Plugin-wit-jQuery-Snap-SVG-Pizza/


#6

Thank you very much for all the resources! :slight_smile: I’ll have a look and see if I can implement any of it.