templates/bar_chart.j2

<style>
    .bc-wrap {
        display: table;
        position: relative;
        margin: 12px 0;
        height: 60px;
      }
      .bc-container {
        display: table-cell;
        width: 100%;
        height: 100%;
        padding-left: 15px;
      }
      .bc {
       display: table;
       height: 100%;
       width: 100%;
       border-bottom: 2px solid black;
      }
      .bccol {
        position: relative;
        vertical-align: bottom;
        display: table-cell;
        height: 100%;
      }
      .bcbar {
        position: relative;
        height: 0;
        transition: height 0.5s 2s;
        width: 27px;
        margin: auto;
        background-color: #358;
      }
      .bcheader {
        position: absolute;
        text-align: center;
        width: 100%;
        bottom: 53px;
        font-size: 11px;
      }
      .bcfooter {
        position: absolute;
        text-align: center;
        width: 100%;
        top: 53px;
        font-size: 10px;
      }
      .bctimecol {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
      }
      .bctime {
        height: 15px;
        vertical-align: middle;
        position: relative;
      }
      .bctime:after {
        border-bottom: 1px dotted black;
        content: "";
        position: absolute;
        width: 100%;
        left: 0;
        top: 0em;
      }
      .bctimetext {
        position: absolute;
        top: -8px;
        z-index: 1;
        background: white;
        padding-right: 5px;
        color: #4d4d4d;
        font-size: 8px;
        font-family: 'Avenir Medium';
      }
      .red-bar {
        background-color: darkred;
      }
      .green-bar {
        background-color: green;
      }
</style>