How to create a bullet bar chart

Available on all plans:
  • Free
  • Pro
  • Business
  • Enterprise

The bullet bar or bullet graph is one of the very few "new" chart types that were not invented a long time ago. Its creator is data visualization expert and book author Stephen Few, who devised the concept in 2005. Though the bullet bar provides more information than a bar chart, it needs the same amount of space. It is easy to read and provides a quick visual comparison, even for people who've never seen this chart type before.

The bullet chart is great to show whether and how something achieved its goal: revenue, racing results, etc. If you have a story about one of the (numerous) examples where targets have been missed, this is the chart to use. Think of large public building projects and how they failed to be on time and on budget:

To create this chart type, you'll need:

  • One header row containing descriptive labels.
  • One column containing categories. This will determine the label in front of each bullet bar. In our case, that's the project.
  • Two columns containing numeric values. In each row, one number will determine the length of the outer bar and one number will determine the length of the inner bar. Please note that both columns (outer and inner bar) should have values of the same measure/currency. In our case, that's costs in Euro. The two bars will later be distinguished by colors. If you want to display just one column of data, consider a regular bar chart.

Below is the data we used to create the chart at the top of the page:

Project Planned costs Actual costs
Elbphilharmonie - This building saw costs rising 15-fold, from 70 to 600 million euros. 0.07 0.6
Electronic Health Insurance Card - Originally, the costs for the introduction were planned for 1.6 billion euros, experts estimate the current budget at at least 5 Billion Euro. 1.6 5
Flughafen Berlin - A series of problems led to a rise from 2 to 4.3 billion euros. 2 4.3
Stuttgart 21 - Costs for Stuttgart's new railway station rose from 2 to 6.8 billion euros. 2 6.8

Source: Spiegel Online

Once you have prepared your data, create a new chart in Datawrapper. You can do so by going to our homepage and clicking on Start creating. In Step 1: Upload, you can either copy & paste your dataset or upload it as a CSV, Excel, or Google Sheets file. After pasting the data into Datawrapper, the text field on the right should look something like this:

Click Proceed at the bottom left to go to the next step.

In the second step, you can check if your dataset was imported correctly and make changes to it, if necessary. If you did not upload a header row, you have to untick "First row as label" to avoid losing your first row of data. Always remember to do this if you don't have descriptive row and column headers.

In step 2, your data should resemble the screenshot below, automatically sorted into columns and rows. You can see that Datawrapper correctly recognized your numbers as numbers (and not as text or dates) because they are colored in blue and are right-aligned. To learn more about Datawrapper's automatic recognition of data formats, visit this article.

To add a unit (like km/h, kg, inches, $, etc.) to your numbers, click on a column header and then add the unit of your choice to the Prepend/append options on the left. You can learn more about adding units to numbers here.

Click on Proceed at the bottom left to go to Step 3: Visualize.

In this step, you'll see a grid of chart types displayed under the first tab Chart type. Odds are that your data will automatically be displayed as a line chart. To switch to bullet bars, click on the "Bullet Bars" symbol in the grid:

You will now see your data displayed as a bullet bar, without a title, descriptions or customized colors. The next step would be to further refine, annotate, and design this chart. Besides Chart type, you'll notice three more tabs in this step: Refine, Annotate, and Layout.

Let's continue with the Refine tab. Here, we see five panels: Bars, Labels, Horizontal axis, Appearance, and Sorting & Grouping.

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 (Size).

We recommend checking what the chart looks like on different screen sizes several times while designing it, by clicking on the little icons (mobile, tablet, and computer) below the chart.

Learn more about changing the width and height of your chart in this article.

The first panel in Refine lets you customize your bars. Here you 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.

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.

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 you want to show percentages close to 100%, it makes sense to extend the chart to 100%. So you could type "100" in the max field.
  • Number format: Here you 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 relative numbers, 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: You 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 you can decide whether you want the x-axis ticks to show up above or below the chart. Try it out by clicking on the options and choose the one that suits the chart better.

In the fourth panel in the tab Refine, you can change the appearance of your bullet bar chart, especially the colors. You can choose one color for all outer bars and one color for all inner bars.

You can also decide to show a color key, make your bars thicker, or add separating lines between them.

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 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 your 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.

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.

In the 2nd panel in the Annotate tab, you can choose to highlight elements: The label in front of or above these bars will appear in bold. You can revert the highlight by clicking on the ''x'' on the left side of the label.

Adding text annotations

You can add annotations to your bullet bar chart by clicking on Add text annotation. You can then style and move the text, add an arrow and circle to it, and adjust how it will appear on mobile. Here's an in-depth explanation of all the options.

You can add a range or line highlight by clicking on Add range highlight and then dragging on the chart where you want the highlight to be. You can then change its position, color, opacity, and line width and style, or delete it again. Here's an in-depth explanation of all the options.

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.

In the final step 4: Publish & Embed, you have the option to publish the chart either by sharing the URL or by pasting the embed code directly into 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 paid plans). For more information on the different pricing plans, click here.

And that's it! You've successfully created and customized your first bullet bar chart.

Last updated on January 8th, 2025