JSFiddle - React, Tailwind, and code Playground

by Tyler Eich

HTML

<svg class="chart" id="chart" preserveAspectRatio="xMidYmid meet">
    <line x1="110" y1="300" x2="1000" y2="300" class="grid" />
    <text x="110" y="300" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">0</text>
    <line x1="110" y1="240" x2="1000" y2="240" class="grid" />
    <text x="110" y="240" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">1</text>
    <line x1="110" y1="180" x2="1000" y2="180" class="grid" />
    <text x="110" y="180" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">2</text>
    <line x1="110" y1="120" x2="1000" y2="120" class="grid" />
    <text x="110" y="120" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end">3</text>
    <line x1="130" y1="0" x2="130" y2="300" class="axis" />
    <line x1="130" y1="300" x2="1000" y2="300" class="axis" />
    <line x1="227" y1="300" x2="323" y2="300" class="plot" />
    <line x1="323" y1="300" x2="420" y2="300" class="plot" />
    <line x1="420" y1="300" x2="517" y2="300" class="plot" />
    <line x1="517" y1="300" x2="613" y2="300" class="plot" />
    <line x1="613" y1="300" x2="710" y2="60" class="plot" />
    <line x1="710" y1="60" x2="807" y2="300" class="plot" />
    <line x1="807" y1="300" x2="903" y2="300" class="plot" />
    <g class="region" id="chart_point_0">
        <rect x="178.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
        <circle cx="227" cy="300" class="point" r="5" />
        <text x="227" y="320" font-size="30" dominant-baseline="middle" class="legend" text-anchor="end" transform="rotate(270 227,320)">2014-05-04</text>
        <text class="popup" text-anchor="middle" dominant-baseline="bottom" x="227" y="280" font-size="30" visibility="hidden">0</text>
    </g>
    <g class="region" id="chart_point_1">
        <rect x="274.66666666667" fill="transparent" y="0" width="96.666666666667" height="500" />
        <circle cx="323" cy="300"...

CSS

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
* {
   box-sizing: border-box; 
}
.chart {position: relative; border: 1px solid #ccc; background: #fff; height: 500px; margin: none;}
.chart .point {stroke: #555; stroke-width: 10; fill: #000;}
.chart .plot {stroke: #aaa; stroke-width: 2;}
.chart .popup {fill: #000; font-family: sans-serif;}

.chart .axis {stroke: #aaa; stroke-width: 1;}
.chart .grid {stroke: #ccc; stroke-width: 1;}


.chart .legend {fill: black; font-family: sans-serif;}

.region:hover .popup {visibility: visible;}

JavaScript

var svg = document.getElementById('chart');
var bBox = svg.getBBox();
svg.setAttribute('viewBox', [bBox.x, bBox.y, bBox.width, bBox.height].join(' '));