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.



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 ("Resize to"). We recommend to do this step first, but you can change the size of your chart at any point.

Customize axes

In the "Refine" tab, we see four panels. The first panel lets us customize your axes. 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. 
  • Labels: Select the column header that contains labels and/or descriptions for each row of your table. These labels will appear before the bars.
  • Groups: 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 its 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: 


In this panel, we have just one decision to make:  How should the bars and their labels be sorted? You can keep the order of your spreadsheet with leaving "Resort bars" unselected. Or you can sort by a column. This will put the longest bars at the top. If you want to have the largest bar at the bottom, choose "ascending". 

Our data is already sorted from small to large for "planned cost". So we can either deselect the checkbox "Resort bars" or choose "Sort by Planned costs – ascending". It won't make a difference. For our chart, the panel looks like this at the end: 


In the next panel, we can decide how the labels and numbers in our chart are displayed. 

The most interesting setting here is the 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. 

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. The panel looks like this at the end: 


In the fourth and last 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: 

Custom range

Below the four panels, you can find one more option: "Custom range". Here you can decide which value range your x axis should cover. By default, the y-axis will be as long as your biggest bar. For our chart, that 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:

These are all the options you can find in the Refine tab. Let's move on to the Annotate tab. Here you'll find a very important option: "Describe chart":



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 the title to tell your readers what's interesting about this chart – the one key statement that you want to show on this chart, 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 specify 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 the 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 themselves. Both, source name and source URL, should be filled out on every map or chart to increase transparency. E.g. US Bureau of Labour Statistics, August 2017

Afer explaining the Annotate options, there's only one tab left: Design. 



In this last step, we can select a preset layout and enable social sharing functions to spread your work. 

  • Users of the free plan or Single users have two options: One layout with and one without the "Get the data" link
  • Users of every other plan are able to select a custom layout here 



After we worked through the four tabs of step 3: Visualize, we can now proceed to step 4: Publish & Embed. Here we 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 on 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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us