[HOW TO] Create a Donut Chart in Xcelsius (In 3 Steps!)

[Former Member]

Donut charts have grown tremendously in popularity in recent years thanks to the clarity with which they display data and, mostly, because they quite simply look better than pie charts on a page.  Unfortunately, Xcelsius does not support Donut charts out of the box, and this has come to frustrate a number of users.  In this tutorial, we'll show you that it's amazingly easy to create donut charts in Xcelsius using a combination of Pie Charts and Overlaid images.

Step 1: Create a pie chart

Create a pie chart as you usually would.  To make it prettier, I turned off most visual elements in this example.  I also turned on "Show Lines", made them White, and increased their thickness, as shown in the image.

Step 2: Create the White Circle overlay

Using your favourite image editing software (GIMP, Photoshot, etc.), create a white circle on top of a transparent background, and save that as a png.

Step 3: Overlay everything

Finally, in Xcelsius, add an Image Component and select your White Circle image.  Place it on top of your pie chart until it looks pretty. 

Depending on the style you're working with, your pie chart might have a border or shadow.  Use additional white/transparent PNG images to 'cover-up' all the bits and pieces you don't want showing in the final product.  Don't worry if this feels amateurish - the user will never be able to tell!

Take-Away

Overlaying transparent PNGs on top of Xcelsius elements can be used for a variety of other uses, so go ahead and use your imagination.