JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div id="chartwrap">
    <svg id="chart" width="500px" height="400px">
        <rect id="chartField" x="0" y="0" width="500" height="400" fill="white" stroke="silver" stroke-width="1" rx="5"/>
    </svg>
    <span id="counter"></span>
</div>
<div id="coords"></div>

CSS

body{
    margin:0;
}

#chartwrap{
    display: block;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin: auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 3px 10px silver;
    width: 500px;
    height: 400px;
}

#counter{
    position: absolute;
    width: 35px;
    text-align: center;
    border-radius: 5px;
    margin-top: -20px;
    height: 20px;
    background: #00b0ef;
    color: white;
    left:20px;
    top:0;
    -webkit-transition: 0.2s;
}

#counter:after{
    content:'';
    display: block;
    position: absolute;
    border-top: solid 10px #00b0ef;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    margin-top: 0px;
    margin-left: 6.5px;
}

#counter:empty{
    display: none;
}

JavaScript

var Chart = function(data){
    var xmlns = "http://www.w3.org/2000/svg"
       ,size = data.length-1
       ,width = 500
       ,height = 400
       ,padding = 0
       
       ,max = Math.max.apply( Math, data )
       ,path = 'M '+padding+' '+height+' '
       ,pathParams = []
       ,i = 0
       ,n = max/(height-50)
       
        
       ,chart = document.getElementById('chart')
       ,field = document.getElementById('chartField')
       ,counter = document.getElementById('counter');

    function createLine(params){

        var elem = document.createElementNS(xmlns, "line");
            
        elem.setAttributeNS(null,"x1",params.x1);
        elem.setAttributeNS(null,"y1",params.y1);
        elem.setAttributeNS(null,"x2",params.x2);
        elem.setAttributeNS(null,"y2",params.y2);
        elem.setAttributeNS(null,"stroke", params.stroke);
        elem.setAttributeNS(null,"stroke-width", "1");
        elem.setAttributeNS(null,'stroke-dasharray',params.dash);
        
        chart.appendChild(elem);
    }
    
    function createDot(params){
        var dot = document.createElementNS(xmlns, "circle");
                                           
        dot.setAttributeNS(null,"cx",params.x);
        dot.setAttributeNS(null,"cy",params.y);
        dot.setAttributeNS(null,"r",'5');
        dot.setAttributeNS(null,"stroke",'white');
        dot.setAttributeNS(null,"stroke-width",'2');
        dot.setAttributeNS(null,"fill",'#00b0ef');
        
        chart.appendChild(dot);
    }
    
    function createPath(params, dots){
        var path = document.createElementNS(xmlns,'path');    
        
        path.setAttributeNS(null, 'd', params);
        path.setAttributeNS(null, 'fill', 'rgba(41, 165, 248, 0.26)');
        path.setAttributeNS(null, 'stroke', '#00b0ef');
        
        chart.appendChild(path);
    }
    
    data.map(function(val){
        pathParams.push(Math.round((width/size)*i)+padding + ' ' + (height-(Math.round(val/n))));
       ...