JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://g.raphaeljs.com/g.raphael.js"></script>
<script src="http://g.raphaeljs.com/g.line.js"></script>
<div id="holder" style="width:800px;height:600px"></div>

CSS

body {
    background: black;
}

JavaScript

var r = Raphael("holder");
r.g.txtattr.font = "18px Arial";
r.g.txtattr.fill = "#ccc";
                
var d1 = [123.2272339,119.7377472,120.7516861,123.0242538,117.153801,115.8917084,116.0157013,116.5079498,117.6062317,116.6430359,114.6888275,110.8925247,115.9662247,115.2125854,112.938797,113.5214844,113.9291,114.6692886,113,111.7201309,115.962532,113.7404633,112.3142548,114,113.195549,112.1496429,113.6989365,111.2608414,112,114.8261185,117.145546,115.7193375,115,114,115.7253876,116,117,119.2646713,123.4548492,131.0422058,130.0486145,131.8208923,132.7519379,133.2447357,136.1759949,141.4139404,145.4695129,147.7685852,147.4279175,148.2247467,149.8389587,149.1700287,152.05867,143.3739929,147.9070587,153.4486847,161.919632,159.177124,161.2537384,170.40979,182.4767456,196.4714355,209.7082825,198.7297211,193.3135529,195.5899506,221.2919617,209.1614227,213.5752411,224.8596191,238.8690948,226.8387451,207.4434052,205.5179596,193.2910004,207.4564362,211.4116058,199.3461151,183.8716888,165.7519531];

var d2 = new Array();
for (var i=1;i<d1.length+1;i++)
    d2.push(i);

r.g.text(280, 10, "Przekrój Wrocław - Trzebnica");
r.g.txtattr.font = "12px Arial";
var a = r.g.linechart(20, 20, 530, 220, d2, d1, {shade: true, axis: "0 0 1 1", gutter:10});
a.lines[0].attr({"stroke": '#33f0ff'})
a.shades[0].attr({"fill": '90-#222-#aaa', opacity:0.5});
a.axis[0].attr({"stroke": '#aaa'});
a.axis[1].attr({"stroke": '#aaa'});