Revenue 2005 YTD

(U.S. $ in thousands)

Edit with CodePen

html

<!-- See Stephen Few's bullet chart spec: http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf -->

<div id="bullet-example">

  <h3>Revenue 2005 YTD</h3>
  <h4>(U.S. $ in thousands)</h4>

  <!-- Black & white -->
  <chart scale-x-linear="0 300">
    <guide-x ticks="0 50 100 150 200 250 300"></guide-x>
    <bar class="good"
         literal-length="300"></bar>
    <bar class="ok"
         literal-length="250"></bar>
    <bar class="bad"
         literal-length="200"></bar>
    <bar class="performance"
         literal-length="275"></bar>
    <dot class="comparison"
         literal-position="260"></dot>
  </chart>

  <!-- Color -->
  <chart class="color"
         scale-x-linear="0 300">
    <guide-x ticks="0 50 100 150 200 250 300"></guide-x>
    <bar class="good"
         literal-length="300"></bar>
    <bar class="ok"
         literal-length="250"></bar>
    <bar class="bad"
         literal-length="200"></bar>
    <bar class="performance"
         literal-length="275"></bar>
    <dot class="comparison"
         literal-position="260"></dot>
  </chart>

</div>

css

#bullet-example {
  width: 100%;
  padding: 60px 80px 80px 80px;
  font-family: Helvetica, Arial, sans-serif;
}
#bullet-example h3, #bullet-example h4 {
  margin: 0;
  text-align: center;
}
#bullet-example h4 {
  margin-bottom: 40px;
}
#bullet-example chart {
  height: 40px;
  width: 80%;
  margin-bottom: 60px;
}
#bullet-example chart.color {
  margin-bottom: 0;
}
#bullet-example guide-x .tick {
  border-width: 2px;
  border-color: black;
}
#bullet-example dot.comparison {
  height: 30px;
  width: 4px;
  top: calc(50% - (30px / 2));
  background-color: black;
  border-radius: 0;
}
#bullet-example bar {
  position: absolute;
  margin: 0;
  border: none;
}
#bullet-example bar.good {
  background-color: #e6e6e6;
}
#bullet-example bar.ok {
  background-color: #cccccc;
}
#bullet-example bar.bad {
  background-color: #b3b3b3;
}
#bullet-example bar.performance {
  background-color: black;
  height: 10px;
  top: 15px;
}
#bullet-example .color .good {
  background-color: #7dac9f;
}
#bullet-example .color .ok {
  background-color: #e5b060;
}
#bullet-example .color .bad {
  background-color: #dc7062;
}