How I designed a layered donut chart

by Prathy Kamasani

This is a long overdue post, probably one of the most received questions on my blog was, How I designed a visual in one of my Power BI reports I published under my portfolio.  As I promised to many, let’s see how I did it. Sorry to spoil, but it is nothing but a layered Donut Chart, but how I approached to show values probably is a good one. Be aware; I created this report quite a long time ago, If I do it now, I probably would have taken a different approach or different visuals.

Here is the visual I am talking about:

NewImage

You can view the full report here – https://prathy.com/portfolio/school-uk/

The tricky bit of any good data visualisation is finding interesting data, inspiration and story. In my report, my story was to show the comparison of Ofsted school ratings among the total number of schools. I also wanted to carry my story between report pages with colours.

So in this particular visual, I wanted to make it visually appealing, so I decided to show two metrics on each donut visual, the measure I want and the total number of schools. Then I resized each visual in a way so that they look like one visual. Those days there were no grouping, but now we can group them as one visual too. Also, when I first designed this report, default Power BI donut chart didn’t have an option to resize the ring, so I went for Circular gauge by MAQ software. Now we can use the default Donut chart too.

However, due to the default responsive nature of Donut chart, we need to choose different inner radius value.

Next Labels:

As I decided to not show any labels of the rings for visual appeal, I added labels next to visual using bullet point kind of effect using the same colours I used on the visual. There are two ways you can achieve this:

By using shape visual:

Using shape visual is easy as we do all the development in one tool, but resizing to get the smallest shape is a bit tricky. That’s when using image is helpful.

By using an image:

Using an image is a tiny bit more work. But we have more options. I like using Flat Icon or PowerPoint. When you use image, you can go for various shapes and sizes.

That’s all, Nothing fancy excpet layering. I hope this helps. Let me know what you think.

Prathy

You may also like

3 comments

sms onay 3 June 2023 - 1:02 am

Informative article, totally what I was looking for.

Reply
gaochunmeibb 25 May 2021 - 1:58 pm

Dear Prathy,
Do you have the code or image in github or other places? I tried multiple browser and the image cannot load in any of them.
Thank you!

Reply
Fareed 4 February 2020 - 10:19 am

This is brilliant and very useful for infographics. Thank you for this 🙂

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More