JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Chart" data-content="sample"></div>

CSS

html,
body {
  background-color: transparent;
}

.Chart {
	background-color: rgba(255,255,255,.1);
}
.Chart__content {
  fill: #0074d9;
  stroke: #0074d9;
}

.Chart__data {
  fill: none;
  stroke-width: .5;
}
.Chart__point {
  stroke: none;
}
.Chart__grid {
	stroke: #777;
}


.labels.x-labels {
  text-anchor: middle;
}
.labels.y-labels {
  text-anchor: end;
}
.labels {
  font-size: 13px;
	stroke: none;
	fill: #fff;
}

JavaScript

(function () {
	[].forEach.call(document.querySelectorAll('.Chart'), chart);

	function chart (item) {
			if (!item) { return; };
			
			var data;
			
			if (item.getAttribute('data-content') === 'sample') {
			data = `58.13
53.98
67.00
89.70
99.00
130.28
166.70
234.98
345.44
443.34
543.70
580.13
605.23
622.77
626.20
628.44
636.23
633.68
624.31
629.32
618.63
599.55
609.86
617.62
614.48
606.98`.split('\n');
			};

			data = data.map(function (item) {
				return parseFloat(item);
			});

			var maxX = data.length - 1;
			var maxY = Math.max.apply(null, data);

			var points = data.map(function (item, index) {
				return [30 + 465 / maxX * index, (170 - (160 / maxY * item))];
			});
			
			var circles = points.map(function (item) {
				return '<circle class="Chart__point" cx="'+ item[0] +'" cy="'+ item[1] +'" r="3"></circle>';
			});

			var result = '<svg class="Chart__content" viewBox="0 0 500 200">'+
					'<g class="Chart__grid Chart__grid--x">'+
					'<line x1="30" x2="30" y1="0" y2="170"></line>'+
					'</g>'+
					'<g class="Chart__grid Chart__grid--y">'+
					'<line x1="30" x2="500" y1="170" y2="170"></line>'+
					'</g>'+
					'<g class="labels x-labels">'+
  				'<text x="45" y="190">2008</text>'+
					'<text x="246" y="190">2009</text>'+
  				'<text x="392" y="190">2010</text>'+
					'<text x="538" y="190">2011</text>'+
  				'<text x="684" y="190">2012</text>'+
					'</g>'+
					'<g class="labels y-labels">'+
  				'<text x="20" y="15">15</text>'+
  				'<text x="20" y="131">10</text>'+
  				'<text x="20" y="248">5</text>'+
  				'<text x="20" y="170">0</text>'+
					'</g>'+
					'<polyline class="Chart__data" '+
					'points="'+ points.join(' ') +'"/>'+
					'<g class="Chart__points">'+
  				circles.join('') +
					'</g>'+
					'</svg>';

			item.innerHTML += result;
	};

})();