please help I need to know how to do this in articulate or powerpoint.

Hi Michael! One of the content library slide templates, Vitality, has a very similar interaction built into and I would start there if I were you. Insert a new slide and select Content Library 360, and in the Interactions section you'll see that the Vitality template has a slide called "related Content" that looks a lot like that. One thing to mention is that this slide works based on when you click on each segment, so if you'd want your information revealed on hover, you'd need to set up the hover states for each of those segments instead.

I've created similar interactions in the past by drawing the base graphic in Adobe Illustrator, then duplicating the graphic and highlighting the relevant area before exporting all of the images as PNGs. 

Once I had all of the images, I imported the main image in to Storyline, before adding the various highlighted versions as states to that image. 

I then added a hotspot over each segment, that when hovered over, fired a trigger to change the state of the image.

I hope that this helps.

One way to do this

Layer 0
Create the chart in powerpoint > insert > chart > pie/doughnut

If nothing else this will be your guide

Layer 1 shape layer A
Create shape (pie) adjust  to fit the segment in the chart.  You can also rotate the shapes if you want rather than trying to drag the shape to size. 

Layer 2

Duplicate the shapes from layer 1.  Copy, and recenter the shapes,  reduce pie wedge to fit for the section. 
repeate for each section.

Laeyr 3 as per layer 2

Be sure to open the layers so that that the top layers get opened last.  This approach uses layer stacking to mask the other sizes.

This should get you your shapes that you need with only a huge aggravation.  one thing that I can't stress enough is to make sure you have the alignment correct.  save often.  All layers must show.