<!-- https://css-tricks.com/making-a-bar-chart-with-css-grid/ -->

<div class="chart">
    <div class="chart__bar" aria-label="2000" data-value="1"><span>1%</span></div>
    <div class="chart__bar" aria-label="2001" data-value="2">2%</div>
    <div class="chart__bar" aria-label="2002" data-value="3">3%</div>
    <div class="chart__bar" aria-label="2003" data-value="4">4%</div>
    <div class="chart__bar" aria-label="2004" data-value="5">5%</div>
    <div class="chart__bar" aria-label="2005" data-value="6">6%</div>
    <div class="chart__bar" aria-label="2006" data-value="7">7%</div>
    <div class="chart__bar" aria-label="2007" data-value="8">8%</div>
    <div class="chart__bar" aria-label="2008" data-value="9">9%</div>
    <div class="chart__bar" aria-label="2009" data-value="10">10%</div>
    <div class="chart__bar" aria-label="2010" data-value="50">50%</div>
    <div class="chart__bar" aria-label="2011" data-value="100">100%</div>
</div>

$totalRows: 101;
@mixin chartValue($data) {
    $result: $totalRows - $data;
    $top: if($data > 9, 5px, -20px);
    grid-row-start: $result !important;
    position: relative;
    text-indent: -999em;
    &:before {
        position: absolute;
        left: 50%;
        top: $top;
        transform: translateX(-50%);
        text-indent: 0;
        content: $data + "%";
    }
    &:after {
        display: inline-block;
        position: absolute;
        left: 50%;
        bottom: -1.2em;
        transform: translate(-50%);
        text-indent: 0;
        content: attr(aria-label);
    }
}
@for $i from 1 through $totalRows {
    .chart__bar[data-value='#{$i}'] {
        @include chartValue($i);
    }
}

.chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(100, 1fr);
    grid-column-gap: 5px;
    margin: 0 auto;
    width: 70vw;
    height: 70vh;
    &__bar {
        grid-row-start: 1;
        grid-row-end: 101;
        border-radius: 5px 5px 0 0;
        background: #ff4136;
        color: #000;
        &:nth-child(even) {
            background: #0074d9;
        }
        span {
            position: absolute;
        }
    }
}

* {
    font-size: 12px;
    font-family: sans-serif;
}