Customizing your bullet bar chart

This guide will walk you through the steps necessary to create a bar chart as seen below. Select  bullet bar chart after uploading your data. There are a number of specific features to make this particular chart type look even better. Let us show you how to make a beautiful chart in three simple steps.

1

Refine

In any tab of step 3: Visualize, you can click, hold, and drag the arrow in the lower right corner to scale the chart window or manually determine the dimension of the chart by entering values in the boxes below the chart ("Chart Size"). We recommend doing this step first, but you can change the size of your chart at any point.

In the  Refine tab, we see five panels that let customize your bullet bar chart: Bars, Labels, Horizontal axis, Appearance, and Soring & Grouping. 

Bars

The first panel lets us customize your bars. Here we can choose which element in your chart shows which data:

  • Outer bar: Select the column header that contains the numeric values that you want to see as the outer bars. We'll choose the column "Planned costs" as our values.
  • Inner bar: Select the column header that contains the numeric values that you want to see as the inner bars. We'll choose the column "Actual costs" as our values. These values should be the same measure (e.g. currency) as the values for the outer bar. 

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

Labels

The second panel lets you choose how you would like to align your labels. Labels are the descriptions for each row of your table that appear before the bars. Try it out yourself by clicking on left/right to see how you would like your labels to look like. 

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

Horizontal Axis 

The third panel lets you decide which value range your x-axis should cover. 

  • Custom range: By default, the x-axis will be as long as your biggest bar. For our chart, that is great. But if we would want to show percentages close to 100%, it makes sense to extend the chart to 100%. So we could write in a "100" in the "max"-field. 
  • Number format: Here we can decide how our values are shown (if we chose 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, we will choose the number format "0", since we don't have interesting decimal places: We don't want to have the numbers "0.0b, 1.0b, 2.0b" in our axis ticks – "0b, 1b, 2b" is sufficient. 

  • Custom grid lines: We also decide against custom gridlines. If you type in numbers like "0.5, 1, 2", the gridlines will only appear at the numbers 0.5, 1, and 2. Otherwise, Datawrapper will adjust the number of gridlines and their spacing automatically for mobile and desktop. We're happy with this default, so there's nothing we need to do. 
  • Tick position: Here we can decide whether we want to show the x-axis ticks to show above the chart or below. Try it out by clicking on the options and choose the one that suits the chart better. 

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

Appearance

In the fourth panel in the tab Refine, we can decide the design of our bar chart: Here, we can  choose colors for our bars: We can choose one color for all outer bars and one color for all inner bars. 

We can also decide to show a color key and stretch our chart by giving it extra dotted lines and thicker bars. 

For our chart, we use all of these settings:

Sorting & Grouping 

In the fifth 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. For example, if you select the Planned costs column, the bars and labels will be sorted accordingly with the longest bar at the top. 
  • Reverse order: If you select this option, you will have the largest bar at the bottom. Our data is already sorted from the smallest to largest for Planned costs so we will keep it unselected. 
  • Group bars by column: You can upload an extra column that will group our bars. In our case, we could have a column that states for each construction project if it started "before 2010" or "after 2010". If we chose that column as our "Groups", the chart would make a separation between the old and new construction projects.

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

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.

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 an SVG or PDF (available only to users of Custom or Enterprise plan). For more information on the different pricing plans, click here