Customizing your split bar chart

After uploading data and selecting the chart type split bars chart, you can make further adjustments to your charts such as adding a title, description, and footnotes among others.


When you are at Step 3: Visualize, you'll see three tabs next to ''Chart type'' namely "Refine", "Annotate" & "Design". (In the "Refine" and "Annotate" tab, you can resize the chart, to make it wider or taller. To do so, click, hold, and drag the arrow in the lower right corner to scale the chart window.)

1

Refine

In the first tab in step 3: Visualize, we can see five panels: Labels, Horizontal axis, Appearance, Sorting & Grouping.  

Labels

In the first panel, we can decide if we want to show the values on our bars and if we want to align the bar labels to the left or the right. 

The most interesting setting here is the  Number format. With it, we can decide how our values are shown (if we choose to display them). Here are three examples:

  • Choose the number format "123.4k" if you have big numbers like "1,303,428" that you'd rather want to display as "1.3m"
  • Choose the number format "0.0" if you have very detailed numbers like "0.1922302" that you'd rather want to display as "0.2"
  • Choose the number format "0%" or "0.0%" if you have a number that is a relative number, like in our case. This setting will add a percentage sign. 

For our chart, the panel looks like this at the end: 

Horizontal axis

The next panel lets us customize our x-axis. Here we can choose which element in your chart shows which data:

First, with Custom range, you can decide which value range your x-axis should cover. By default, the x-axis for each column will be as long as your biggest bar. But if our chart shows percentages close to 100%, it makes sense to extend the chart to 100%. Readers will then be able to see how much is "missing" to achieve the ideal 100%. So we can write in a "100" in the "max"-field. 

If we have tiny values in certain columns and huge ones in others, we can also check the option Use independent scales for each column. Note that this will make it harder for our readers to compare the values across the columns with each other, and that it can lead to misread information. We will leave this option turned off for our chart.

For our chart, the panel looks like this at the end: 

Appearance

In the third panel in the tab Refine, we can decide the design of our bar chart: We can choose bar colors and decide if we want to separate rows with a line, make our bars thicker or give each bar a grey background.

Let's focus on how to  choose colors for our bars. First, we can select a column to assign colors with. We can also choose one color and its shades for all our bars (click on "Base color" to change the default color). When we click on "customize colors", we can choose individual colors for each bar. In our chart, we can give a higher usage of a social network a darker color.

You can select and give the same color to multiple bars at the same time by highlighting them together. (If you want to highlight multiple items that are listed consecutively, hold down the Shift key while selecting. If the items are not in consecutive order, hold down the Ctrl (Windows) or Command (Mac) key while selecting.)

You can also select colors by clicking on the colored boxes, choose different gradients of the same color or manually enter Hex color codes (e.g. #267C87 is green, #267c8750 is green with 50% opacity).

In this panel, we can choose whether to show the color key or not. In our chart, it is obvious what the colors signify so we will leave it unselected. We can also decide if our rows should be separated with a dotted line if the bars should be thicker, if there should be a grey background for each bar and if we want to increase or decrease the space between the columns. A cluttered chart can be cleaned up with these settings. We'll select these three checkboxes: 

Sorting & Grouping

In the fourth and last panel, we can decide how to  sort the order of your bars and labels and decide how you want to group them. 

  • Sort bars: You can keep the order of your spreadsheet by leaving this option unselected. If you select this option, you can choose the column you want to sort the bars by. In our chart, we can choose to sort the bars by the first column "I don't use it" which will make the biggest value come at the top of the chart. 
  • Reverse order: If you select this option, you will have the largest bar at the bottom
  • Groups: You can upload an extra column to put categories into extra groups. In our case, we could have a column that states for each social network if it's been around "before 2010" or "after 2010". If we choose that column as our "Groups", the chart would make a separation between the bars showing the "old" social networks and the younger ones.

For our chart, the panel looks like this at the end: 


2

Annotate

Describe chart

If you've created a Datawrapper chart or map before, you already know this feature. Here we can give your chart a title, a description, add notes, and a source:

  • We recommend using a title that conveys the most interesting or important aspect of the chart. Think of it as a key statement that you want your readers to remember if they do not explore the background data in detail, E.g. "Unemployment highest in the south"
  • The description should have as much information about the data as possible: What do we see exactly? E.g. "Unemployment rates in % in all US states, 2016"
  • Think of notes as footnotes, where we want to clarify any abnormalities about your data. E.g. "California unemployment rates from Jan and Feb 2016 not included in the calculation."
  • The source name will give our readers information about how trustworthy our data is. Does it come from a government institution or another trustworthy organization? The source URL lets our reader dig even deeper and have a look at the underlying data. Whenever possible, ensure that you provide the source name and source URL for every map and chart to increase transparency. E.g. US Bureau of Labour Statistics, August 2017

Highlight elements

In the 2nd panel in the "Annotate" tab, we can choose to highlight elements: The label in front of these bars will appear in bold. We can revert the highlight by clicking on the x in front of the label:


3

Design

In the ''Design'' tab under step 3: Visualize, you can select a preset layout. Should it come with the Datawrapper layout or in the custom design of your organization? 

You can also change the  Output Locale for your map. This affects the language of the attribution in the bottom left of your map and defines decimal and thousand separators as well as translation of month and weekday names.

You can also and enable social sharing function to share your work. If you select the checkbox, the share buttons for Facebook, LinkedIn and Twitter will appear on the top-right corner of your map. Users of the Free plan have two options: one layout with and one without the "Get the data" link. Users of Datawrapper's Custom and Enterprise plan have the option to select a custom layout 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 an SVG or PDF (available only to users of Custom and Enterprise plan). For more information on the different pricing plans, click here.