Piechart with multiple parts


Hi guys,

perhaps a noobish question but at the moment I’m stuck:

Every form, graphic or pic is put in a “rectangle container” by “Hype”, meaning by clicking an object you have eight anchor-points around it.

The chart I have to put up have some very big pie-pieces (i.e. 36%) but VERY small pieces also (i.e. 1,2% and 2,5%).

Every pie-piece is a single png which is grouped with the others.

To be clickable and calling an action the PNG has to be on top layer (right!?).

Due to the rectangle-container-behaviour the smaller pieces overlays each other in a way that it is impossible to click the parts next to it.

Is there a way to set up an “image-map” that follows the true form of the graphic, like in the old HTML-days?

Any help really is appreciated!

Thanks a lot and best regards


(Hans-Gerd Claßen) #2

svg instead of png?


I’ve never used SVG before. Does this format exclude the “rectangle” behaviour of graphics?


Here’s a demo of how to link just the path of an SVG:


It requires setting an ID on the path or SVG element you want linked:

<clipPath id="clipTriangleUp">
            <polygon points="0 87,100 87,50 0"/>

And then including an anchor tag which references the ID of that path within the SVG code:


Easier than this would be to use regular rectangles (which can have opaque). If you strategically overlay them, you can get them to link to individual URLs or timelines: linkedelements.hype.zip (25.7 KB)


Perhaps my project-file will make it clearer. Please have a look:
Pie-Chart.hype.zip (58.4 KB)

Especially “Layer 4” and “Layer5” are blocking each other.

You hoover over layer 5 but text 4 fades in due to the fact that clickable instance have to be top-level.

Hope anybody can help me out on this. Thanks!


(Jeremy Anderson) #6

Hey Tesla,

Suggest that you look at http://d3pie.org

You will find that this with javascript is way better than doing this manually. They have a cool generator on the website for testing your content as well. Good luck!


That indeed is a possible tool but with hype I have greater influence on the look.

Isn’t there any way of solving this within “Hype”?


(Jeremy Anderson) #8

I’m relatively new to using Hype myself and am not the best person to offer
up advice here. I just thought to share a resource which which I have used
previously for accomplishing SVG pie charts. Sorry I cannot be of further


Hi Jeremy,

please don’t get me wrong. Indeed your tip was the right path. I was able to realize the piechart due to your hint. Thanks for that!
I was/I’m still dazzled that “hype” seems to reach its limits on such a simple figure.


(Jonathan Deutsch) #10

In fairness, it is more that HTML has reached its limit, which is why one needs to go SVG :wink:. I just came across this article for drawing pie charts (anything but simple…):

(Edgar) #11

Hi Jeremy

I looked at the site http://d3pie.org and I am not sure but how do I get the graphs generated on the site to appear in Hype. I did try a HTML widget but that did not work. Is it possible to use the code generated for the graph to be used in Hype?


You’re welcome :slight_smile:

d3pie.hype.zip (94.5 KB)

(Edgar) #13

Thank you that works perfectly