<figure>

<ul class="sparklist">
      <li>
          <a href="http://www.example.com/fruits/apples/">Apples</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
          <span class="index"><span class="count" style="height: 97%;">220,</span> </span>
          <span class="index"><span class="count" style="height: 62%;">140,</span> </span>
          <span class="index"><span class="count" style="height: 35%;">80,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 80%;">180,</span> </span>
          <span class="index"><span class="count" style="height: 62%;">140,</span> </span>
          <span class="index"><span class="count" style="height: 53%;">120,</span> </span>
          <span class="index"><span class="count" style="height: 71%;">160,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 100%;">225,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125)</span> </span>
        </span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/apples/">Bananas</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 40%;">(90,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125,</span> </span>
          <span class="index"><span class="count" style="height: 67%;">150,</span> </span>
          <span class="index"><span class="count" style="height: 44%;">100,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 100%;">225,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125)</span> </span>
        </span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/apples/">Cherries</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 22%;">(75,</span> </span>
          <span class="index"><span class="count" style="height: 44%;">100,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 35%;">80,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 44%;">100)</span></span>
        </span>
      </li>
      <li>
         <a href="http://www.example.com/fruits/apples/">Dates</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 11%;">(25,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 13%;">30,</span> </span>
          <span class="index"><span class="count" style="height: 8%;">20,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 11%;">25,</span> </span>
          <span class="index"><span class="count" style="height: 16%;">35,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 13%;">30,</span> </span>
          <span class="index"><span class="count" style="height: 8%;">20,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 11%;">25)</span> </span>
        </span>
      </li>
    </ul>
  <figcaption>Fruits eaten in the last 14 days by type</figcaption>
</figure>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.