Bullet chart

Bullet charts are handy for measuring progress toward a set of goals.

The bullet chart example below shows free throw shooting performance for the 2014 Golden State Warriors. In this chart, the blue line represents the player’s free throw shooting percentage in 2014. The white triangle indicates the player’s average career free throw shooting percentage. The light gray band indicates the maximum possible percentage (100%), while the medium gray band indicates the player’s career maximum percentage, and the dark gray band indicates the player’s career minimum percentage.

The chart shows how players are performing compared to expectation, as those players whose blue line surpasses the white triangle have outperformed their career average. Those players whose blue line falls short of the white triangle have underperformed their career average.

Mode Analytics

Click Results à la Mode to clone this report and create your own bullet chart. Learn more about using HTML to customize your reports.

Create a bullet chart

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.bulletChart(
  {
    chart_width: 800,
    left_pad: 150,
    query_name: "2014 GSW Free Throw Percentage",
    title: "Free throw shooting percentage",
    title_column: "name",
    subtitle_column: "position",
    bar_column: "Free Throw Percentage",
    marker_column: "career_mean",
    scale_columns: ["career_min","career_max","max_possible"]
  }
)

</script>

You can customize the bullet chart by editing each of these parameters in the snippet:

• html_element: If not provided, the visualization will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
• chart_width: The full width of the visualization in pixels.
• left_pad: The padding to the left of each bullet chart. Add more padding for long titles.
• query_name: The name of the query that returns the dataset you want to visualize. If you update the name of the query, you’ll need to update it here as well.
• title: The main title of the visualization.
• title column: The dataset column that defines the title of each bullet chart.
• subtitle column: The dataset column that defines the subtitle of each bullet chart.
• bar_column: The dataset column that defines the size of the blue bar for each bullet chart.
• marker_column: The dataset column that defines the marker on each bullet chart.
• scale_columns: The three dataset columns that defines the the grey bars in each bullet chart.

Tags: charts