Customizing your election donut

After you've uploaded a dataset into Datawrapper and selected the election donut chart, the next step is to customize its appearance.  Here are three small steps to customize your election donut. 

One strength of the Datawrapper election chart is that you use the exact colors of the parties being presented, which is important for making the results instantly recognizable fo the users. A green party should appear green on the election donut, of course. 


The first thing you will notice is that the election donut might be too small. You have two options to  resize the chart, either through resizing using your mouse or by specifying the exact size you want:

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

  • specify the exact size of the chart by defining the height and width in pixels with the help of the boxes below the chart:
1

Refine

In the "Refine" tab, you'll see a few options:

First, we can  choose colors for our donut slices. We can click on the color next to the words "Base color", to choose a color and its shades for all donut slices. When we click on "customize colors...", we can choose individual colors for all our slices. Especially when using an election donut, you might want to do a bit of research for the exact colors of the election parties. 

There is only one option left in the Refine tab: You can decide if you want to sort the donut slices by size. By default, this is turned off. Instead, the parties in your election donut are sorted by the order with which they appear in the data. If you want to change this order (according to the actual seating in the parliament), you will need to go back to step 1: Upload data and sort your rows. We did that, so we will let "Sort by size" unchecked:

These are all the options you can find in the Refine tab. Let's move on to the Annotate tab. Here you'll find two options: "Describe chart" and "Highlight element".

2

Annotate

In the Annotate tab, you're first asked to give your visualization a title, description, notes, source, byline, and an alternative description for screen readers. You can find a detailed explanation of all these Annotate options here.

Highlight element

In the 2nd panel in the "Annotate" tab, we can emphasize certain donut slices. All the other donut slices will then tone down in their color. To remove added elements, click on the little "x" at the left of the text in the blue button:

3

Layout

In the Layout tab, you can select an output locale, change the design theme and footer options, and enable social sharing. Find a detailed explanation of all the Layout options here.

4

Publish

In the final step 4: Publish & Embed, you have the option to publish the chart either by sharing the URL or by copying the embed code directly on your website or CMS (recommended). You can also download your chart as a PNG (available to all users regardless of the type of subscription plan they have) or as a SVG or PDF (available only to users of Custom or Enterprise plan). For more information on the different pricing plans, click here.