Customizing a donut chart

Once you have uploaded a dataset into Datawrapper and selected the donut chart, you can further enhance its appearance. Let us show you how to make a beautiful chart in three simple steps. This guide will walk you through the steps necessary to create a donut chart as seen below.

1. Refine

The first thing you will notice is that the donut chart might be too small. You have two options to  resize the chart:

  • Click, hold, and drag the resize arrow in the bottom right corner of the chart or

  • Specify the exact size of the chart by defining the resolution in pixels with the help of the boxes below the chart.

Change the colors
Click on " customize colors" to choose distinct colors for each part of the donut.

Show total value in the center

  • This applies to two variations: If you report about values which are nominal (e.g. number of iPhones sold, by model) this can display how many have been sold in total (e.g. 5 million). 
  • If you report about the percentages this would always be 100% in combination with showing the percent share of each model. 

Show values as percentages
This will add a % sign. Ensure that the values are really representing percentages. 

Place legends outside of the chart
Often you will have one or several data points which are very small. This is a challenge for placing the legends in a readable way. This is why Datawrapper provides an option to place descriptions for very small values outside the chart. You can check/uncheck the option "Label smaller slices outside the chart". You will notice that the parts will rearrange after this step. 

The GIF below shows you all the changes in action:

2. Annotate

In this tab, you can edit the title description (sub-title), and add notes. Make your data accessible and explorable by naming the source name and providing its URL, preferably to the. 

As an option in this step, you can highlight one specific part of the Donut chart. This should be understood as a quick command, essentially it is a variation of choosing specific colors for each part. Highlighting works slightly different by giving selected parts a strong color and reducing the color value of the other parts to make the one that is most important stand out. 

3. Design

In this last step, you can select a preset layout and enable social sharing functions to spread your work. Click on " Publish" and you'll be directed to the "Publish & Embed" page.

The best way to use a Datawrapper chart is by embedding it directly in your website. To do that, click the big blue button that says " Embed chart on website". Then, copy & paste the embed code snippet into your website or CMS. You can also download your chart as a PNG or PDF by upgrading to a paid Single or Team account. Click here for more information on the different pricing plans of Datawrapper.

Still need help? Contact Us Contact Us