JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<figure class="chart" data-minor-step="10" data-major-step="20">
    <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>
    <figcaption class="axis-x">x axis label</figcaption>
    <figcaption class="axis-y">y axis label</figcaption>
</figure>

<figure id="raph">
</figure>

SCSS

.chart {
    border: 1px inset #333;
    width: 500px;
    height: 200px;
    position:relative;
    background: #ccc;
    font: 12px Arial;
    
    figcaption {
        position:absolute;
        
        &.axis-x {
            bottom:5px;
            width:100%;
            text-align:center;
            padding-top:5px;
            border-top: 1px solid #000;
        }
        &.axis-y {
            top: 90px;
            -webkit-transform: rotate(-90deg);
            width: 200px;
            text-align: center;
            background: rgba(120,45,12,.5);
            left: -90px;
            padding-bottom: 5px;
            border-bottom: 1px solid #000;
        }
    }
    .bar {
        margin: 0 0 14px 20px;
        background: #aef;
        height: 77%;
        padding: 10px 0;
        
        dt {
            margin:.5em 0 0 1em;
            
            &.correct {
                color: green;
                font-weight:bold;
                
                & + dd {
                    background-color: green;
                }
            }
            
            &.respondant {
                color: red;
                font-style: italic;
                
                & + dd {
                    background-color: red;
                }
            }
        }
        dd {
            background: rgba(20,20,89,.85);
            margin:0;
            text-indent:-9999px;
            border-radius: 0 3px 3px 0;
        }
    }
}

JavaScript

var dataTerms = document.querySelectorAll('.bar dt');
    var dataPoints = document.querySelectorAll('.bar dd');
    
    var stage = new Kinetic.Stage({
        container: 'raph',
        width: 500,
        height: 200
    });

    var bg = new Kinetic.Layer();

    var bgbox = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 500,
        height: 200,
        fill: '#ddd',
        stroke: 'black',
        strokeWidth: 1
    });

    var axisX = new Kinetic.Line({
        points: [20,0,20,200],
        stroke: '#000',
        strokeWidth: 1,
        lineCap: 'round',
        lineJoin: 'round'
      });

    var axisXLabel = new Kinetic.Text({
        x: stage.getWidth() / 2,
        y: stage.getHeight() - 16,
        text: 'X-Axis',
        fontSize: 12,
        fontFamily: 'Arial',
        fill: '#000'
      });

    var axisY = new Kinetic.Line({
        points: [0,180,500,180],
        stroke: '#000',
        strokeWidth: 1,
        lineCap: 'round',
        lineJoin: 'round'
      });

    var axisYLabel = new Kinetic.Text({
        x: 5,
        y: stage.getHeight() / 2,
        text: 'Y-Axis',
        fontSize: 12,
        fontFamily: 'Arial',
        fill: '#000',
        rotationDeg: -90
      });

    // add the shape to the layer
    bg.add(bgbox);
    bg.add(axisX);
    bg.add(axisXLabel);
    bg.add(axisY);
    bg.add(axisYLabel);

    // add the layer to the stage
    stage.add(bg);
    
    var GraphLayer = new Kinetic.Layer();

    var graphBG = new Kinetic.Rect({
        x: 21,
        y:1,
        width: stage.getWidth() - 22,
        height: stage.getHeight() - 22,
        fill: '#aef'
    });

    var grapharea = {width: graphBG.getWidth(),height: graphBG.getHeight()};

    GraphLayer.add(graphBG);

    stage.add(GraphLayer);

    var dataLayer = new Kinetic.Layer();

    var startPosX = 21;
    var startPosY = 0;
    
    for(var pt = 0; pt < dataTerms.length; pt++){
        var label = dataTerms[pt].innerHTML;
        var ptInfo...