JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<figure class="chart" data-minor-step="10" data-major-step="5">
    <figcaption class="axis-x">
        <span class="major">20%</span>
        <span class="major">40%</span>
        <span class="major">60%</span>
        <span class="major">80%</span>
        <span class="major">100%</span>
    </figcaption>
    <dl data-total="42" class="bar horizontal">
        <dt>Significant improvements in overall survival (OS), progression-free survival (PFS), and overall response rate (ORR)</dt>
        <dd data-total="20" data-pct="48" style="width:48%;">Explanation text</dd>
        <dt class="correct">Second Answer</dt>
        <dd data-total="5" data-pct="12" style="width:12%;">Explanation text</dd>
        <dt class="respondant">Third Answer</dt>
        <dd data-total="12" data-pct="28" style="width:28%;">Explanation text</dd>
        <dt>Fourth Answer</dt>
        <dd data-total="5" data-pct="12" style="width:12%;">Explanation text</dd>
    </dl>
</figure>

SCSS

.chart {
    width: 500px;
    background: #ebebeb;
    font: 12px Arial;
    margin:20px 0;
    position:relative;
    
    figcaption {
        background:#fff;
        height:20px;
        
        &.axis-x {
            display:table;
            width:100%;
            text-align:center;
            
            .major {
                display:table-cell;
                width:20%;
                text-align: right;
            }
        }
    }
    
    .grid {
        display:block;
        position:absolute;
        width:100%;
        z-index:-2;
        
        .mark {
            display:block;
            float:left;
            width:10%;
            border-right: 1px solid #ededeb;
            min-height:200px;
            margin-right:-1px;
            
            &.major {
                border-right-color:#eee;
            }
            
            &:last-child {
                border-right:0;
            }
        }
    }
    
    .bar {
        position:absolute;
        z-index:100;
        top:20px;
        margin: 0;
        padding: 0;
        display: table;
        min-height:200px;
        border:1px solid #d7d7d7;
        width:100%;
        
        dt {
            margin:10px 0 0 1px;
            
            &.correct {
                color: #cf8444;
                font-weight:bold;
                
                & + dd {
                    background: #fed3a4;
                    background: -moz-linear-gradient(top,  #fed3a4 0%, #f59c63 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed3a4), color-stop(100%,#f59c63));
                    background: -webkit-linear-gradient(top,  #fed3a4 0%,#f59c63 100%);
                    background: -o-linear-gradient(top,  #fed3a4 0%,#f59c63 100%);
                    background: -ms-linear-gradient(top,  #fed3a4 0%,#f59c63 100%);
                    background: linear-gradient(to bottom,  #fed3a4 0%,#f59c63 100%);
             ...

JavaScript

var $chart = $('.chart');
    var minorSteps = $chart.data('minor-step');
    var majorSteps = $chart.data('major-step');
    var majorMod = (minorSteps / majorSteps);

    var cols = $('.chart .axis-x');
    var $barchart = $('.chart .bar');
    var $grid = $('<section class="grid">');

    $barchart.before($grid);

    for(var idxCol = 0; idxCol < minorSteps; idxCol++){
        var colMarker = $("<span>");
        var major = ((idxCol % majorMod) == 1);
        colMarker.addClass("mark");
        if (major) 
            colMarker.addClass("major");
        $grid.append(colMarker);
    }

    var dataTerms = $('.bar dt');
    var dataPoints = $('.bar dd');